<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Lists Module Level 3</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="refining" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This module contains CSS features related to list counters: styling them, positioning them, and manipulating their value." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-lists-3/" rel="canonical">
<style>
		#counter-nesting-example .ol { background: rgba(0,0,0,.1); margin: .5em 0; padding: .2em .5em; }
		#counter-nesting-example .li > .ol { margin: 0 0 0 1em; }
		#counter-nesting-example .li { list-style: none; margin-left: 1em;}
		</style>
<style>
	#counter-inheritance-example b.foo { color: red; }
	#counter-inheritance-example b.bar { color: green; }
	#counter-inheritance-example b.baz { color: blue; }
	</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Lists Module Level 3</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-lists-3/">https://drafts.csswg.org/css-lists-3/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-lists-3/">https://www.w3.org/TR/css-lists-3/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2019/WD-css-lists-3-20190425/" rel="prev">https://www.w3.org/TR/2019/WD-css-lists-3-20190425/</a>
      <dd><a href="https://www.w3.org/TR/2014/WD-css-lists-3-20140320/" rel="prev">https://www.w3.org/TR/2014/WD-css-lists-3-20140320/</a>
      <dd><a href="https://www.w3.org/TR/2011/WD-css3-lists-20110524/" rel="prev">https://www.w3.org/TR/2011/WD-css3-lists-20110524/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins</a> (<span class="p-org org">Google</span>)
      <dt class="editor">Former Editors:
      <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:ian@hixie.ch">Ian Hickson</a> (<span class="p-org org">Google</span>)
      <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:tantekc@microsoft.com">Tantek Çelı̇k</a> (<span class="p-org org">Formerly of Microsoft</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-lists-3/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-lists-3">GitHub Issues</a>
      <dt>Contributors:
      <dd>Simon Montagu, AOL-TW/Netscape, <a href="mailto:smontagu@netscape.com">smontagu@netscape.com</a>
      <dd>Daniel Yacob, <a href="mailto:yacob@geez.org">yacob@geez.org</a>
      <dd>Christopher Hoess, <a href="mailto:choess@stwing.upenn.edu">choess@stwing.upenn.edu</a>
      <dd>Daniel Glazman, AOL-TW/Netscape, <a href="mailto:glazman@netscape.com">glazman@netscape.com</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This module contains CSS features related to list counters: styling them, positioning them, and manipulating their value.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-lists” in the title,
	preferably like this:
	“[css-lists] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
    <li><a href="#declaring-a-list-item"><span class="secno">2</span> <span class="content"> Declaring a List Item</span></a>
    <li>
     <a href="#markers"><span class="secno">3</span> <span class="content"> Markers</span></a>
     <ol class="toc">
      <li><a href="#marker-pseudo"><span class="secno">3.1</span> <span class="content"> The <span class="css">::marker</span> Pseudo-Element</span></a>
      <li><a href="#content-property"><span class="secno">3.2</span> <span class="content"> Generating Marker Contents</span></a>
      <li><a href="#image-markers"><span class="secno">3.3</span> <span class="content"> Image Markers: the <span class="property">list-style-image</span> property</span></a>
      <li><a href="#text-markers"><span class="secno">3.4</span> <span class="content"> Text-based Markers: the <span class="property">list-style-type</span> property</span></a>
      <li><a href="#list-style-position-property"><span class="secno">3.5</span> <span class="content"> Positioning Markers: The <span class="property">list-style-position</span> property</span></a>
      <li><a href="#list-style-property"><span class="secno">3.6</span> <span class="content"> Styling Markers: the <span class="property">list-style</span> shorthand property</span></a>
      <li><a href="#marker-side"><span class="secno">3.7</span> <span class="content"> The <span class="property">marker-side</span> property</span></a>
     </ol>
    <li>
     <a href="#auto-numbering"><span class="secno">4</span> <span class="content"> Automatic Numbering With Counters</span></a>
     <ol class="toc">
      <li><a href="#counter-reset"><span class="secno">4.1</span> <span class="content"> Creating Counters: the <span class="property">counter-reset</span> property</span></a>
      <li><a href="#increment-set"><span class="secno">4.2</span> <span class="content"> Manipulating Counter Values: the <span class="property">counter-increment</span> and <span class="property">counter-set</span> properties</span></a>
      <li><a href="#nested-counters"><span class="secno">4.3</span> <span class="content"> Nested Counters and Scope</span></a>
      <li>
       <a href="#creating-counters"><span class="secno">4.4</span> <span class="content"> Creating and Inheriting Counters</span></a>
       <ol class="toc">
        <li><a href="#inheriting-counters"><span class="secno">4.4.1</span> <span class="content"> Inheriting Counters</span></a>
        <li><a href="#instantiating-counters"><span class="secno">4.4.2</span> <span class="content"> Instantiating Counters</span></a>
       </ol>
      <li><a href="#counters-without-boxes"><span class="secno">4.5</span> <span class="content"> Counters in elements that do not generate boxes</span></a>
      <li><a href="#list-item-counter"><span class="secno">4.6</span> <span class="content"> The Implicit <span class="css">list-item</span> Counter</span></a>
      <li><a href="#counter-functions"><span class="secno">4.7</span> <span class="content"> Outputting Counters: the <span class="css">counter()</span> and <span class="css">counters()</span> functions</span></a>
     </ol>
    <li><a href="#ua-stylesheet"><span class="secno">5</span> <span class="content"> Appendix A: Sample Style Sheet For HTML</span></a>
    <li><a href="#acknowledgments"><span class="secno"></span> <span class="content"> Acknowledgments</span></a>
    <li>
     <a href="#changes"><span class="secno"></span> <span class="content">Changes</span></a>
     <ol class="toc">
      <li><a href="#changes-20190817"><span class="secno"></span> <span class="content">Changes since the 17 August 2019 WD</span></a>
      <li><a href="#changes-20190425"><span class="secno"></span> <span class="content">Changes since the 25 April 2019 WD</span></a>
      <li><a href="#changes-20140320"><span class="secno"></span> <span class="content">Changes since the 20 March 2014 WD</span></a>
      <li><a href="#changes-from-css2"><span class="secno"></span> <span class="content">Changes From CSS Level 2</span></a>
     </ol>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>This specification defines the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker">::marker</a> pseudo-element,
	the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item">list-item</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#display-type" id="ref-for-display-type">display type</a> that generates markers,
	and several properties controlling the placement and styling of markers.</p>
   <p>It also defines <a data-link-type="dfn" href="#counter" id="ref-for-counter">counters</a>,
	which are special numerical objects
	often used to generate the default contents of markers.</p>
   <div class="example" id="example-f930c7d5">
    <a class="self-link" href="#example-f930c7d5"></a> For instance, the following example illustrates
		how markers can be used to add parentheses around each numbered list item: 
<pre class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- f>li</c-><c- p>::</c-><c- nd>marker</c-> <c- p>{</c-> <c- k>content</c-><c- p>:</c-> <c- u>"("</c-> counter<c- p>(</c-><c- kc>list-item</c-><c- p>,</c-> <c- kc>lower-roman</c-><c- p>)</c-> <c- u>")"</c-><c- p>;</c-> <c- p>}</c->
<c- f>li</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> <c- kc>list-item</c-><c- p>;</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>ol</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>></c->This is the first item.
  <c- p>&lt;</c-><c- f>li</c-><c- p>></c->This is the second item.
  <c- p>&lt;</c-><c- f>li</c-><c- p>></c->This is the third item.
<c- p>&lt;/</c-><c- f>ol</c-><c- p>></c->
</pre>
    <p>It should produce something like this:</p>
<pre>  (i) This is the first item.
 (ii) This is the second item.
(iii) This is the third item.
</pre>
    <p class="note" role="note"><span>Note:</span> Note that this example is far more verbose than is usually needed in HTML,
		as the UA default style sheet takes care of most of the necessary styling.</p>
   </div>
   <p>With descendant selectors and child selectors,
	it’s possible to specify different marker types depending on the depth of embedded lists.</p>
   <h2 class="heading settled" data-level="2" id="declaring-a-list-item"><span class="secno">2. </span><span class="content"> Declaring a List Item</span><a class="self-link" href="#declaring-a-list-item"></a></h2>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="list-item">list item</dfn> is any element with its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display">display</a> property set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-list-item" id="ref-for-valdef-display-list-item">list-item</a>. <a data-link-type="dfn" href="#list-item" id="ref-for-list-item">List items</a> generate <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①">::marker</a> pseudo-elements;
	no other elements do.
	Additionally, <span id="ref-for-list-item①">list items</span> automatically increment an implied <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①">list-item</a> <a data-link-type="dfn" href="#counter" id="ref-for-counter①">counter</a> (see <a href="#list-item-counter">§ 4.6 The Implicit list-item Counter</a>).</p>
   <h2 class="heading settled" data-level="3" id="markers"><span class="secno">3. </span><span class="content"> Markers</span><a class="self-link" href="#markers"></a></h2>
   <p>The defining feature of the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②">list item</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#display-type" id="ref-for-display-type①">display type</a> is its <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="marker | marker box" id="marker">marker</dfn>,
	a symbol or ordinal that helps denote the beginning of each <span id="ref-for-list-item③">list item</span> in a list.
	In the CSS layout model, <span id="ref-for-list-item④">list item</span> <a data-link-type="dfn" href="#marker" id="ref-for-marker">markers</a> are represented by
	a <span id="ref-for-marker①">marker box</span> associated with each <span id="ref-for-list-item⑤">list item</span>.
	The contents of this <span id="ref-for-marker②">marker</span> can be controlled with
	the <a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type">list-style-type</a> and <a class="property" data-link-type="propdesc" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image">list-style-image</a> properties on the <span id="ref-for-list-item⑥">list item</span> and by assigning properties to its <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker②">::marker</a> pseudo-element.</p>
   <h3 class="heading settled" data-level="3.1" id="marker-pseudo"><span class="secno">3.1. </span><span class="content"> The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker③">::marker</a> Pseudo-Element</span><a class="self-link" href="#marker-pseudo"></a></h3>
   <p>The <a data-link-type="dfn" href="#marker" id="ref-for-marker③">marker box</a> is generated by
	the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker④">::marker</a> pseudo-element of a <a data-link-type="dfn" href="#list-item" id="ref-for-list-item⑦">list item</a> as the <span id="ref-for-list-item⑧">list item’s</span> first child,
	before the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before">::before</a> pseudo-element
	(if it exists on the element).
	It is filled with content
	as defined in <a href="#content-property">§ 3.2 Generating Marker Contents</a>.</p>
   <p><a data-link-type="dfn" href="#marker" id="ref-for-marker④">Marker boxes</a> only exist for <a data-link-type="dfn" href="#list-item" id="ref-for-list-item⑨">list items</a>:
	on any other element,
	the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker⑤">::marker</a> pseudo-element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content">content</a> property must compute to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-content-3/#valdef-content-none" id="ref-for-valdef-content-none">none</a>,
	which suppresses its creation.</p>
   <p>Only a limited set of properties can be used on the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker⑥">::marker</a> pseudo-element.
	This list is defined in <a href="https://www.w3.org/TR/css-pseudo-4/#marker-pseudo">CSS Pseudo-Elements 4 §4.2 List Markers: the ::marker pseudo-element</a>.</p>
   <div class="example" id="example-062e4ca0">
    <a class="self-link" href="#example-062e4ca0"></a> In this example, markers are used to number paragraphs that are designated as "notes": 
<pre class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- f>p</c-> <c- p>{</c-> <c- k>margin-left</c-><c- p>:</c-> <c- mi>12</c-> <c- n>em</c-><c- p>;</c-> <c- p>}</c->
<c- f>p</c-><c- p>.</c-><c- nc>note</c-> <c- p>{</c->
  <c- k>display</c-><c- p>:</c-> <c- kc>list-item</c-><c- p>;</c->
  <c- k>counter-increment</c-><c- p>:</c-> <c- n>note-counter</c-><c- p>;</c->
<c- p>}</c->
<c- f>p</c-><c- p>.</c-><c- nc>note</c-><c- p>::</c-><c- nd>marker</c-> <c- p>{</c->
  <c- k>content</c-><c- p>:</c-> <c- u>"Note "</c-> counter<c- p>(</c-><c- n>note</c-><c- o>-</c-><c- n>counter</c-><c- p>)</c-> <c- u>":"</c-><c- p>;</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>p</c-><c- p>></c->This is the first paragraph in this document.
<c- p>&lt;</c-><c- f>p</c-> <c- e>class</c-><c- o>=</c-><c- s>"note"</c-><c- p>></c->This is a very short document.
<c- p>&lt;</c-><c- f>p</c-><c- p>></c->This is the end.
</pre>
    <p>It should render something like this:</p>
<pre>        This is the first paragraph
        in this document.

Note 1: This is a very short
        document.

        This is the end.
</pre>
   </div>
   <div class="example" id="example-203ca64c">
    <a class="self-link" href="#example-203ca64c"></a> By using the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker⑦">::marker</a> pseudo-element,
		a list’s markers can be styled
		independently from the text of the list item itself: 
<pre class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- f>p</c-> <c- p>{</c-> <c- k>margin-left</c-><c- p>:</c-> <c- mi>8</c-><c- b>em</c-> <c- p>}</c-> <c- c>/* Make space for counters */</c->
<c- f>li</c-> <c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> <c- kc>lower-roman</c-><c- p>;</c-> <c- p>}</c->
<c- f>li</c-><c- p>::</c-><c- nd>marker</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>blue</c-><c- p>;</c-> <c- k>font-weight</c-><c- p>:</c-><c- kc>bold</c-><c- p>;</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>p</c-><c- p>></c->This is a long preceding paragraph ...
<c- p>&lt;</c-><c- f>ol</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>></c->This is the first item.
  <c- p>&lt;</c-><c- f>li</c-><c- p>></c->This is the second item.
  <c- p>&lt;</c-><c- f>li</c-><c- p>></c->This is the third item.
<c- p>&lt;/</c-><c- f>ol</c-><c- p>></c->
<c- p>&lt;</c-><c- f>p</c-><c- p>></c->This is a long following paragraph ...
</pre>
    <p>The preceding document should render something like this:</p>
<pre>       This is a long preceding
       paragraph ...

  <span style="color:blue;font-weight:bold;">i.</span>   This is the first item.
 <span style="color:blue;font-weight:bold;">ii.</span>   This is the second item.
<span style="color:blue;font-weight:bold;">iii.</span>   This is the third item.

       This is a long following
       paragraph ...
</pre>
    <p>Previously the only way to style a marker was through inheritance;
		one had to put the desired marker styling on the list item,
		and then revert that on a wrapper element around the list item’s actual contents.</p>
   </div>
   <h3 class="heading settled" data-level="3.2" id="content-property"><span class="secno">3.2. </span><span class="content"> Generating Marker Contents</span><a class="self-link" href="#content-property"></a></h3>
   <p>The contents of a <a data-link-type="dfn" href="#marker" id="ref-for-marker⑤">marker box</a> are determined by the first of these conditions that is true:</p>
   <dl class="switch">
    <dt><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content①">content</a> on the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker⑧">::marker</a> itself is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-content-3/#valdef-content-normal" id="ref-for-valdef-content-normal">normal</a> 
    <dd> The contents of the <a data-link-type="dfn" href="#marker" id="ref-for-marker⑥">marker box</a> are determined as defined by the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content②">content</a> property,
			exactly as for <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before①">::before</a>. 
    <dt><a class="property" data-link-type="propdesc" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image①">list-style-image</a> on the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element">originating element</a> defines a <a data-link-type="dfn" href="#marker-image" id="ref-for-marker-image">marker image</a> 
    <dd> The '<a data-link-type="dfn" href="#marker" id="ref-for-marker⑦">marker box</a> contains
			an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#anonymous" id="ref-for-anonymous">anonymous</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline" id="ref-for-inline">inline</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#replaced-element" id="ref-for-replaced-element">replaced element</a> representing the specified <a data-link-type="dfn" href="#marker-image" id="ref-for-marker-image①">marker image</a>,
			followed by a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#text-run" id="ref-for-text-run">text run</a> consisting of a single space (U+0020 SPACE). 
    <dt><a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type①">list-style-type</a> on the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element①">originating element</a> defines a <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string">marker string</a> 
    <dd> The <a data-link-type="dfn" href="#marker" id="ref-for-marker⑧">marker box</a> contains
			a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#text-run" id="ref-for-text-run①">text run</a> consisting of the specified <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string①">marker string</a>. 
    <dt>otherwise 
    <dd> The <a data-link-type="dfn" href="#marker" id="ref-for-marker⑨">marker box</a> has no contents
			and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker⑨">::marker</a> does not generate a box. 
   </dl>
   <h3 class="heading settled" data-level="3.3" id="image-markers"><span class="secno">3.3. </span><span class="content"> Image Markers: the <a class="property" data-link-type="propdesc" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image②">list-style-image</a> property</span><a class="self-link" href="#image-markers"></a></h3>
   <table class="def propdef" data-link-for-hint="list-style-image">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-list-style-image">list-style-image</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image">&lt;image></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> none 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="#list-item" id="ref-for-list-item①⓪">list items</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-list-style-image-none" id="ref-for-valdef-list-style-image-none">none</a>or the computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image①">&lt;image></a> 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>Specifies the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="marker-image">marker image</dfn>,
	which is used to fill the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item①①">list item’s</a> <a data-link-type="dfn" href="#marker" id="ref-for-marker①⓪">marker</a> when its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content③">content</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-content-3/#valdef-content-normal" id="ref-for-valdef-content-normal①">normal</a>.
	The values are as follows:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="list-style-image" data-dfn-type="value" data-export id="valdef-list-style-image-image"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image②">&lt;image></a><a class="self-link" href="#valdef-list-style-image-image"></a></dfn> 
    <dd> If the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image③">&lt;image></a> represents a <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#invalid-image" id="ref-for-invalid-image">valid image</a>,
			specifies the element’s <a data-link-type="dfn" href="#marker-image" id="ref-for-marker-image②">marker image</a> as the <span class="production" id="ref-for-typedef-image④">&lt;image></span>.
			Otherwise,
			the element has no <span id="ref-for-marker-image③">marker image</span>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="list-style-image" data-dfn-type="value" data-export id="valdef-list-style-image-none">none</dfn> 
    <dd> The element has no <a data-link-type="dfn" href="#marker-image" id="ref-for-marker-image④">marker image</a>. 
   </dl>
   <div class="example" id="example-f0b1fc19">
    <a class="self-link" href="#example-f0b1fc19"></a> The following example sets the marker at the beginning of each list item to
		be the image "ellipse.png". 
<pre class="highlight"><c- f>li </c-><c- p>{</c-> <c- k>list-style-image</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>"http://www.example.com/ellipse.png"</c-><c- p>)</c-> <c- p>}</c-></pre>
   </div>
   <h3 class="heading settled" data-level="3.4" id="text-markers"><span class="secno">3.4. </span><span class="content"> Text-based Markers: the <a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type②">list-style-type</a> property</span><a class="self-link" href="#text-markers"></a></h3>
   <table class="def propdef" data-link-for-hint="list-style-type">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-list-style-type">list-style-type</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value">&lt;string></a> <span id="ref-for-comb-one②">|</span> none 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>disc 
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="#list-item" id="ref-for-list-item①②">list items</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified value 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>Specifies the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="marker-string">marker string</dfn>,
	which is used to fill the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item①③">list item</a>’s <a data-link-type="dfn" href="#marker" id="ref-for-marker①①">marker</a> when its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content④">content</a> value is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-content-3/#valdef-content-normal" id="ref-for-valdef-content-normal②">normal</a> and there is no <a data-link-type="dfn" href="#marker-image" id="ref-for-marker-image⑤">marker image</a>.
	The values are as follows:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="list-style-type" data-dfn-type="value" data-export id="valdef-list-style-type-counter-style"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></a><a class="self-link" href="#valdef-list-style-type-counter-style"></a></dfn> 
    <dd>
      Specifies the element’s <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string②">marker string</a> as
			the value of the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item②">list-item</a> counter
			represented using the specified <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style②" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></a>. 
     <p>Specifically,
			the <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string③">marker string</a> is
			the result of <a data-link-type="dfn" href="https://drafts.csswg.org/css-counter-styles-3/#generate-a-counter" id="ref-for-generate-a-counter">generating a counter representation</a> of the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item③">list-item</a> counter value
			using the specified <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style③" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></a>,
			prefixed by the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-prefix" id="ref-for-descdef-counter-style-prefix">prefix</a> of the <span class="production" id="ref-for-typedef-counter-style④" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></span>,
			and followed by the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-suffix" id="ref-for-descdef-counter-style-suffix">suffix</a> of the <span class="production" id="ref-for-typedef-counter-style⑤" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></span>.
			If the specified <span class="production" id="ref-for-typedef-counter-style⑥" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></span> does not exist, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#decimal" id="ref-for-decimal">decimal</a> is assumed.</p>
    <dt><dfn class="css" data-dfn-for="list-style-type" data-dfn-type="value" data-export id="valdef-list-style-type-string"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value①">&lt;string></a><a class="self-link" href="#valdef-list-style-type-string"></a></dfn> 
    <dd> The element’s <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string④">marker string</a> is the specified <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value②">&lt;string></a>. 
    <dt><dfn class="css" data-dfn-for="list-style-type" data-dfn-type="value" data-export id="valdef-list-style-type-none">none<a class="self-link" href="#valdef-list-style-type-none"></a></dfn> 
    <dd> The element has no <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string⑤">marker string</a>. 
   </dl>
   <div class="example" id="example-6484e67f">
    <a class="self-link" href="#example-6484e67f"></a> The following examples illustrate how to set markers to various values: 
<pre class="highlight"><c- f>ul </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> <c- s>"★"</c-><c- p>;</c-> <c- p>}</c->
<c- c>/* Sets the marker to a "star" character */</c->

<c- f>p.note </c-><c- p>{</c->
  <c- k>display</c-><c- p>:</c-> list-item<c- p>;</c->
  <c- k>list-style-type</c-><c- p>:</c-> <c- s>"Note: "</c-><c- p>;</c->
  <c- k>list-style-position</c-><c- p>:</c-> inside<c- p>;</c->
<c- p>}</c->
<c- c>/* Gives note paragraphs a marker consisting of the string "Note: " */</c->

<c- f>ol </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> upper-roman<c- p>;</c-> <c- p>}</c->
<c- c>/* Sets all ordered lists to use the upper-roman counter-style</c->
<c- c>   (defined in the Counter Styles specification [[CSS-COUNTER-STYLES]]) */</c->

<c- f>ul </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> <c- nf>symbols</c-><c- p>(</c->cyclic <c- s>'○'</c-> <c- s>'●'</c-><c- p>);</c-> <c- p>}</c->
<c- c>/* Sets all unordered list items to alternate between empty and</c->
<c- c>   filled circles for their markers. */</c->

<c- f>ul </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> none<c- p>;</c-> <c- p>}</c->
<c- c>/* Suppresses the marker entirely, unless list-style-image is specified</c->
<c- c>   with a valid image. */</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="3.5" id="list-style-position-property"><span class="secno">3.5. </span><span class="content"> Positioning Markers: The <a class="property" data-link-type="propdesc" href="#propdef-list-style-position" id="ref-for-propdef-list-style-position">list-style-position</a> property</span><a class="self-link" href="#list-style-position-property"></a></h3>
   <table class="def propdef" data-link-for-hint="list-style-position">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-list-style-position">list-style-position</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">inside <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> outside 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>outside 
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="#list-item" id="ref-for-list-item①④">list items</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>keyword, but see prose 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>This property dictates whether the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①⓪">::marker</a> is rendered inline,
	or positioned just outside of the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item①⑤">list item</a>.
	The values are as follows:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="list-style-position" data-dfn-type="value" data-export id="valdef-list-style-position-inside">inside</dfn> 
    <dd> No special effect.
			(The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①①">::marker</a> is an inline element at the start of the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item①⑥">list item’s</a> contents.) 
    <dt><dfn class="dfn-paneled css" data-dfn-for="list-style-position" data-dfn-type="value" data-export id="list-style-position-outside">outside</dfn> 
    <dd>
      If the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item①⑦">list item</a> is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-container" id="ref-for-block-container">block container</a>:
			the marker box is <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#blockify" id="ref-for-blockify">blockified</a> <a data-link-type="biblio" href="#biblio-css-display-3">[CSS-DISPLAY-3]</a> and placed outside the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#principal-box" id="ref-for-principal-box">principal block box</a>;
			however, the position of the list-item marker adjacent to floats is undefined.
			CSS does not specify the precise location of the marker box
			or its position in the painting order,
			but does require that it be placed on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-start" id="ref-for-inline-start">inline-start</a> side of the box,
			using the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing mode</a> of the box indicated by <a class="property" data-link-type="propdesc" href="#propdef-marker-side" id="ref-for-propdef-marker-side">marker-side</a>.
			The marker box is fixed with respect to the principal block box’s border
			and does not scroll with the principal box’s content.
			A UA may hide the marker if the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> is other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible">visible</a>.
			(This allowance may change in the future.)
			The size or contents of the marker box may affect
			the height of the principal block box
			and/or the height of its first line box,
			and in some cases may cause the creation of a new line box;
			this interaction is also not defined. 
     <p class="issue" id="issue-ffa70ac6"><a class="self-link" href="#issue-ffa70ac6"></a> This is handwavey nonsense from CSS2, and needs a real definition.</p>
     <p>If the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item①⑧">list item</a> is an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-box" id="ref-for-inline-box">inline box</a>:
			this value is equivalent to <a class="css" data-link-type="maybe" href="#valdef-list-style-position-inside" id="ref-for-valdef-list-style-position-inside">inside</a>.</p>
     <p class="issue" id="issue-bf311ada"><a class="self-link" href="#issue-bf311ada"></a> Alternatively, <a class="css" data-link-type="maybe" href="#list-style-position-outside" id="ref-for-list-style-position-outside">outside</a> could lay out the marker as a previous sibling of the principal inline box.</p>
   </dl>
   <div class="example" id="example-b050971d">
    <a class="self-link" href="#example-b050971d"></a> For example: 
<pre>&lt;style>
  ul.compact { list-style: inside; }
  ul         { list-style: outside; }
&lt;/style>
&lt;ul class=compact>
  &lt;li>first "inside" list item comes first&lt;/li>
  &lt;li>second "inside" list item comes first&lt;/li>
&lt;/ul>
&lt;hr>
&lt;ul>
  &lt;li>first "outside" list item comes first&lt;/li>
  &lt;li>second "outside" list item comes first&lt;/li>
&lt;/ul>
</pre>
    <p>The above example may be formatted as:</p>
<pre>  * first "inside" list
  item comes first
  * second "inside" list
  item comes second

========================

* first "outside" list
  item comes first
* second "outside" list
  item comes second</pre>
   </div>
   <h3 class="heading settled" data-level="3.6" id="list-style-property"><span class="secno">3.6. </span><span class="content"> Styling Markers: the <a class="property" data-link-type="propdesc" href="#propdef-list-style" id="ref-for-propdef-list-style">list-style</a> shorthand property</span><a class="self-link" href="#list-style-property"></a></h3>
   <table class="def propdef" data-link-for-hint="list-style">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-list-style">list-style</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-list-style-position" id="ref-for-propdef-list-style-position①">&lt;'list-style-position'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production" data-link-type="propdesc" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image③">&lt;'list-style-image'></a> <span id="ref-for-comb-any①">||</span> <a class="production" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type③">&lt;'list-style-type'></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="#list-item" id="ref-for-list-item①⑨">list items</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-list-style" id="ref-for-propdef-list-style①">list-style</a> property is a shorthand notation
	for setting the three properties <a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type④">list-style-type</a>, <a class="property" data-link-type="propdesc" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image④">list-style-image</a>, and <a class="property" data-link-type="propdesc" href="#propdef-list-style-position" id="ref-for-propdef-list-style-position②">list-style-position</a> at the same place in the style sheet.</p>
   <div class="example" id="example-7bda667c">
    <a class="self-link" href="#example-7bda667c"></a> For example: 
<pre class="highlight"><c- f>ul </c-><c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> upper-roman inside <c- p>}</c->  <c- c>/* Any UL */</c->
<c- f>ul ul </c-><c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> circle outside <c- p>}</c-> <c- c>/* Any UL child of a UL */</c->
</pre>
   </div>
   <p>Using a value of <span class="css">none</span> in the shorthand is potentially ambiguous,
	as <span class="css">none</span> is a valid value for both <a class="property" data-link-type="propdesc" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image⑤">list-style-image</a> and <a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type⑤">list-style-type</a>.
	To resolve this ambiguity,
	a value of <span class="css">none</span> in the shorthand must be applied to whichever of the two properties aren’t otherwise set by the shorthand.</p>
   <div class="example" id="example-4ba742b8">
    <a class="self-link" href="#example-4ba742b8"></a> 
<pre class="highlight">list-style: none disc;
<c- c>/* Sets the image to "none" and the type to "disc". */</c->

list-style: none url(bullet.png);
<c- c>/* Sets the image to "url(bullet.png)" and the type to "none". */</c->

list-style: none;
<c- c>/* Sets both image and type to "none". */</c->

list-style: none disc url(bullet.png);
<c- c>/* Syntax error */</c->
</pre>
   </div>
   <div class="example" id="example-4d590fca">
    <a class="self-link" href="#example-4d590fca"></a> Although authors may specify <a class="property" data-link-type="propdesc" href="#propdef-list-style" id="ref-for-propdef-list-style②">list-style</a> information directly on list item elements
		(e.g., <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element" id="ref-for-the-li-element">li</a></code> in HTML),
		they should do so with care.
		Consider the following rules: 
<pre class="highlight"><c- f>ol.alpha li </c-><c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> lower-alpha<c- p>;</c-> <c- p>}</c->
<c- f>ul li       </c-><c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> disc<c- p>;</c-> <c- p>}</c->
</pre>
    <p>The above won’t work as expected.
		If you nest a <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element" id="ref-for-the-ul-element">ul</a></code> into an <a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element" id="ref-for-the-ol-element">ol class=alpha</a>,
		the first rule’s specificity will make the <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element" id="ref-for-the-ul-element①">ul</a></code>’s list items use the lower-alpha style.</p>
<pre class="highlight"><c- f>ol.alpha > li </c-><c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> lower-alpha<c- p>;</c-> <c- p>}</c->
<c- f>ul > li       </c-><c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> disc<c- p>;</c-> <c- p>}</c->
</pre>
    <p>These work as intended.</p>
<pre class="highlight"><c- f>ol.alpha </c-><c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> lower-alpha<c- p>;</c-> <c- p>}</c->
<c- f>ul       </c-><c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> disc<c- p>;</c-> <c- p>}</c->
</pre>
    <p>These are even better,
		since inheritance will transfer the <a class="property" data-link-type="propdesc" href="#propdef-list-style" id="ref-for-propdef-list-style③">list-style</a> value to the list items.</p>
   </div>
   <h3 class="heading settled" data-level="3.7" id="marker-side"><span class="secno">3.7. </span><span class="content"> The <a class="property" data-link-type="propdesc" href="#propdef-marker-side" id="ref-for-propdef-marker-side①">marker-side</a> property</span><a class="self-link" href="#marker-side"></a></h3>
   <table class="def propdef" data-link-for-hint="marker-side">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-marker-side">marker-side</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">match-self <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> match-parent 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>match-self 
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="#list-item" id="ref-for-list-item②⓪">list items</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-marker-side" id="ref-for-propdef-marker-side②">marker-side</a> property specifies
	whether the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①②">::marker</a> is positioned
	based on the directionality of the list item itself (i.e. its <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element②">originating element</a>)
	or the directionality of the list container (i.e. the <span id="ref-for-originating-element③">originating element</span>’s parent).
	In the first case, the position of the marker can vary across items in the same list,
	based on the directionality assigned to each list item individually;
	in the second case they will all align on the same side,
	as determined by the directionality assigned to the list as a whole.</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="marker-side" data-dfn-type="value" data-export id="valdef-marker-side-match-self">match-self</dfn> 
    <dd> The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①③">::marker</a> pseudo-element is positioned
			using the directionality of the <span class="css" id="ref-for-selectordef-marker①④">::marker</span>’s <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element④">originating element</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="marker-side" data-dfn-type="value" data-export id="valdef-marker-side-match-parent">match-parent</dfn> 
    <dd> The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①⑤">::marker</a> pseudo-element is positioned
			using the directionality of the <span class="css" id="ref-for-selectordef-marker①⑥">::marker</span>’s <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element⑤">originating element’s</a> parent element. 
   </dl>
   <div class="example" id="example-305896a3">
    <a class="self-link" href="#example-305896a3"></a> By default, elements or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①⑦">::marker</a> pseudo-elements
		position themselves according to their list item’s directionality.
		However, if the list item is grouped with several other list items which may have different directionality
		(for example, multiple &lt;li>s with different "dir" attributes in an &lt;ol> in HTML),
		it is sometimes more useful to have all the markers line up on one side,
		so the author can specify a single "gutter" on that side
		and be assured that all the markers will lie in that gutter and be visible. 
    <p>Both of the following example renderings are generated from the following HTML,
		with the only difference being the value of <a class="property" data-link-type="propdesc" href="#propdef-marker-side" id="ref-for-propdef-marker-side③">marker-side</a> on the list:</p>
<pre class="highlight"><c- p>&lt;</c-><c- f>ul</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>></c->english one
  <c- p>&lt;</c-><c- f>li</c-> <c- e>dir</c-><c- o>=</c-><c- s>rtl</c-><c- p>></c->OWT WERBEH
  <c- p>&lt;</c-><c- f>li</c-><c- p>></c->english three
  <c- p>&lt;</c-><c- f>li</c-> <c- e>dir</c-><c- o>=</c-><c- s>rtl</c-><c- p>></c->RUOF WERBEH
<c- p>&lt;/</c-><c- f>ul</c-><c- p>></c->
</pre>
    <table class="data" style="width: 35em;">
     <thead>
      <tr>
       <th><a class="css" data-link-type="maybe" href="#valdef-marker-side-match-self" id="ref-for-valdef-marker-side-match-self">match-self</a> 
       <th><a class="css" data-link-type="maybe" href="#valdef-marker-side-match-parent" id="ref-for-valdef-marker-side-match-parent">match-parent</a> 
     <tbody>
      <tr>
       <td style="border-right: thin solid">
<pre>* english one
     OWT WERBEH *
* english three
    RUOF WERBEH *</pre>
       <td>
<pre>* english one
*    OWT WERBEH
* english three
*   RUOF WERBEH</pre>
    </table>
   </div>
   <h2 class="heading settled" data-level="4" id="auto-numbering"><span class="secno">4. </span><span class="content"> Automatic Numbering With Counters</span><a class="self-link" href="#auto-numbering"></a></h2>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="counter">counter</dfn> is a special numeric tracker
	used, among other things, to automatically number list items in CSS.
	Every element has a collection of zero or more counters,
	which are inherited through the document tree in a way similar to inherited property values.
	Counters have a name and creator element,
	which identify the counter,
	and an integer value per element.
	They are created and manipulated with
	the <dfn data-dfn-type="dfn" data-export id="counter-properties">counter properties<a class="self-link" href="#counter-properties"></a></dfn> <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment">counter-increment</a>, <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set">counter-set</a> and <a class="property" data-link-type="propdesc" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset">counter-reset</a>,
	and used with the <a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter">counter()</a> and <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters">counters()</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#functional-notation" id="ref-for-functional-notation">functional notations</a>.</p>
   <p>Counters are referred to in CSS syntax
	using the <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-counter-name"><a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name">&lt;counter-name></a></dfn> type,
	which represents their name as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value">&lt;custom-ident></a>.
	A <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①">&lt;counter-name></a> name cannot match the keyword <a class="css" data-link-type="maybe" href="#valdef-counter-reset-none" id="ref-for-valdef-counter-reset-none">none</a>;
	such an identifier is <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-invalid" id="ref-for-css-invalid">invalid</a> as a <span class="production" id="ref-for-typedef-counter-name②">&lt;counter-name></span>.</p>
   <p>Resolving <a data-link-type="dfn" href="#counter" id="ref-for-counter②">counter</a> values on a given element is a multi-step process:</p>
   <ol>
    <li data-md>
     <p>Existing counters are <a data-link-type="dfn" href="#inherit-counters" id="ref-for-inherit-counters">inherited</a> from previous elements.</p>
    <li data-md>
     <p>New counters are <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter">instantiated</a> (<a class="property" data-link-type="propdesc" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset①">counter-reset</a>).</p>
    <li data-md>
     <p>Counter values are incremented (<a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment①">counter-increment</a>).</p>
    <li data-md>
     <p>Counter values are explicitly set (<a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set①">counter-set</a>).</p>
    <li data-md>
     <p>Counter values are used (<a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter①">counter()</a>/<a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters①">counters()</a>).</p>
   </ol>
   <p>UAs may have implementation-specific limits
	on the maximum or minimum value of a counter.
	If a counter reset, set, or increment
	would push the value outside of that range,
	the value must be clamped to that range.</p>
   <h3 class="heading settled" data-level="4.1" id="counter-reset"><span class="secno">4.1. </span><span class="content"> Creating Counters: the <a class="property" data-link-type="propdesc" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset②">counter-reset</a> property</span><a class="self-link" href="#counter-reset"></a></h3>
   <table class="def propdef" data-link-for-hint="counter-reset">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-counter-reset">counter-reset</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name③">&lt;counter-name></a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" id="ref-for-integer-value">&lt;integer></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus">+</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> none 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-counter-reset-none" id="ref-for-valdef-counter-reset-none①">none</a> or a list, each item an identifier paired with an integer 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p class="all-media">User Agents are expected to support this property on all media, including non-visual ones. </p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset③">counter-reset</a> property <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter①">instantiates</a> new <a data-link-type="dfn" href="#counter" id="ref-for-counter③">counters</a> on an element
	and sets them to the specified integer values.
	Its values are defined as follows:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="counter-reset" data-dfn-type="value" data-export id="valdef-counter-reset-none">none</dfn> 
    <dd> This element does not create any new counters. 
    <dt><dfn class="css" data-dfn-for="counter-reset" data-dfn-type="value" data-export id="valdef-counter-reset-counter-name-integer"><a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name④">&lt;counter-name></a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" id="ref-for-integer-value①">&lt;integer></a>?<a class="self-link" href="#valdef-counter-reset-counter-name-integer"></a></dfn> 
    <dd> <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter②">Instantiates</a> a counter of the given <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name⑤">&lt;counter-name></a> with a starting value of the given <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" id="ref-for-integer-value②">&lt;integer></a>,
			defaulting to <span class="css">0</span>. 
   </dl>
   <div class="example" id="example-2636b37c">
    <a class="self-link" href="#example-2636b37c"></a> Note that counter properties follow the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#cascade" id="ref-for-cascade">cascading</a> rules as normal.
		Thus, due to cascading, the following style sheet: 
<pre class="highlight"><c- f>h1 </c-><c- p>{</c-> <c- k>counter-reset</c-><c- p>:</c-> section <c- m>-1</c-> <c- p>}</c->
<c- f>h1 </c-><c- p>{</c-> <c- k>counter-reset</c-><c- p>:</c-> imagenum <c- m>99</c-> <c- p>}</c->
</pre>
    <p>will only reset <span class="css">imagenum</span>.
		To reset both counters,
		they have to be specified together:</p>
<pre class="highlight"><c- f>H1 </c-><c- p>{</c-> <c- k>counter-reset</c-><c- p>:</c-> section <c- m>-1</c-> imagenum <c- m>99</c-> <c- p>}</c-></pre>
    <p>The same principles apply to the <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set②">counter-set</a> and <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment②">counter-increment</a> properties.
		See <a data-link-type="biblio" href="#biblio-css-cascade-4">[css-cascade-4]</a>.</p>
   </div>
   <p>If multiple instances of the same <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name⑥">&lt;counter-name></a> occur in the property value,
	only the last one is honored.</p>
   <h3 class="heading settled" data-level="4.2" id="increment-set"><span class="secno">4.2. </span><span class="content"> Manipulating Counter Values: the <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment③">counter-increment</a> and <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set③">counter-set</a> properties</span><a class="self-link" href="#increment-set"></a></h3>
   <table class="def propdef" data-link-for-hint="counter-increment">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-counter-increment">counter-increment</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name⑦">&lt;counter-name></a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" id="ref-for-integer-value③">&lt;integer></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus①">+</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> none 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-counter-reset-none" id="ref-for-valdef-counter-reset-none②">none</a> or a list, each item an identifier paired with an integer 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p class="all-media">User Agents are expected to support this property on all media, including non-visual ones. </p>
   <table class="def propdef" data-link-for-hint="counter-set">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-counter-set">counter-set</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name⑧">&lt;counter-name></a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" id="ref-for-integer-value④">&lt;integer></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus②">+</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> none 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-counter-reset-none" id="ref-for-valdef-counter-reset-none③">none</a> or a list, each item an identifier paired with an integer 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p class="all-media">User Agents are expected to support this property on all media, including non-visual ones. </p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment④">counter-increment</a> and <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set④">counter-set</a> properties
	manipulate the value of existing <a data-link-type="dfn" href="#counter" id="ref-for-counter④">counters</a>.
	They only <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter③">instantiate</a> new counters
	if there is no counter of the given name on the element yet.
	Their values are defined as follows:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="counter-set counter-increment" data-dfn-type="value" data-export id="valdef-counter-set-counter-increment-none">none<a class="self-link" href="#valdef-counter-set-counter-increment-none"></a></dfn> 
    <dd> This element does not alter the value of any counters. 
    <dt><dfn class="css" data-dfn-for="counter-set counter-increment" data-dfn-type="value" data-export id="valdef-counter-set-counter-increment-counter-name-integer"><a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name⑨">&lt;counter-name></a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" id="ref-for-integer-value⑤">&lt;integer></a>?<a class="self-link" href="#valdef-counter-set-counter-increment-counter-name-integer"></a></dfn> 
    <dd>
      Sets (for <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set⑤">counter-set</a>) or increments (for <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment⑤">counter-increment</a>)
			the value of the named counter on the element
			to/by the specified <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" id="ref-for-integer-value⑥">&lt;integer></a>.
			If the <span class="production" id="ref-for-integer-value⑦">&lt;integer></span> is omitted,
			it defaults to <span class="css">1</span> (for <span class="property" id="ref-for-propdef-counter-increment⑥">counter-increment</span>)
			or <span class="css">0</span> (for <span class="property" id="ref-for-propdef-counter-set⑥">counter-set</span>). 
     <p>If there is not currently a counter of the given name on the element,
			the element <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter④">instantiates</a> a new counter of the given name
			with a starting value of <span class="css">0</span> before setting or incrementing its value.</p>
   </dl>
   <div class="example" id="example-838dca3e">
    <a class="self-link" href="#example-838dca3e"></a> 
    <p>This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc. </p>
<pre class="highlight"><c- f>h1::before </c-><c- p>{</c->
    <c- k>content</c-><c- p>:</c-> <c- s>"Chapter "</c-> <c- nf>counter</c-><c- p>(</c->chapter<c- p>)</c-> <c- s>". "</c-><c- p>;</c->
    <c- k>counter-increment</c-><c- p>:</c-> chapter<c- p>;</c->  <c- c>/* Add 1 to chapter */</c->
    <c- k>counter-reset</c-><c- p>:</c-> section<c- p>;</c->      <c- c>/* Set section to 0 */</c->
<c- p>}</c->
<c- f>h2::before </c-><c- p>{</c->
    <c- k>content</c-><c- p>:</c-> <c- nf>counter</c-><c- p>(</c->chapter<c- p>)</c-> <c- s>"."</c-> <c- nf>counter</c-><c- p>(</c->section<c- p>)</c-> <c- s>" "</c-><c- p>;</c->
    <c- k>counter-increment</c-><c- p>:</c-> section<c- p>;</c->
<c- p>}</c->
</pre>
   </div>
   <p>If multiple instances of the same <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①⓪">&lt;counter-name></a> occur in the property value,
	they are all processed, in order.
	Thus increments will compound,
	but only the last set value will take effect.</p>
   <h3 class="heading settled" data-level="4.3" id="nested-counters"><span class="secno">4.3. </span><span class="content"> Nested Counters and Scope</span><a class="self-link" href="#nested-counters"></a></h3>
   <p>Counters are “self-nesting”; <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter⑤">instantiating</a> a new counter on an element
	which inherited an identically-named <a data-link-type="dfn" href="#counter" id="ref-for-counter⑤">counter</a> from its parent
	creates a new counter of the same name,
	nested inside the existing counter.
	This is important for situations like lists in HTML,
	where lists can be nested inside lists to arbitrary depth:
	it would be impossible to define uniquely named counters for each level.
	The <a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter②">counter()</a> function only retrieves the <a data-link-type="dfn" href="#innermost" id="ref-for-innermost">innermost</a> counter of a given name on the element,
	whereas the <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters②">counters()</a> function uses all counters of a given name that contain the element.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="scope" data-lt="counter scope" data-noexport id="counter-scope">scope</dfn> of a <a data-link-type="dfn" href="#counter" id="ref-for-counter⑥">counter</a> therefore
	starts at the first element in the document that <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter⑥">instantiates</a> that counter
	and includes the element’s descendants and its following siblings with their descendants.
	However, it does not include any elements in the scope of a counter with the same name
	created by a <a class="property" data-link-type="propdesc" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset④">counter-reset</a> on a later sibling of the element,
	allowing such explicit counter instantiations
	to obscure those earlier siblings.</p>
   <p>See <a href="#creating-counters">§ 4.4 Creating and Inheriting Counters</a> for the exact rules governing the scope of counters and their values.</p>
   <div class="example" id="counter-nesting-example">
    <a class="self-link" href="#counter-nesting-example"></a> The following code numbers nested list items.
		The result is very similar to that of setting <span class="css">display:list-item</span> and <a class="css" data-link-type="propdesc" href="#propdef-list-style" id="ref-for-propdef-list-style④">list-style: inside</a> on the LI element: 
<pre class="highlight"><c- f>ol </c-><c- p>{</c-> <c- k>counter-reset</c-><c- p>:</c-> item <c- p>}</c->
<c- f>li </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> block <c- p>}</c->
<c- f>li::before </c-><c- p>{</c-> <c- k>content</c-><c- p>:</c-> <c- nf>counter</c-><c- p>(</c->item<c- p>)</c-> <c- s>". "</c-><c- p>;</c-> <c- k>counter-increment</c-><c- p>:</c-> item <c- p>}</c->
</pre>
    <p>In this example,
		an <a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element" id="ref-for-the-ol-element①">ol</a> will create a counter,
		and all children of the <span id="ref-for-the-ol-element②">ol</span> will refer to that counter.</p>
    <p>If we denote the <var>n</var><sup>th</sup> instance of the <span class="css">item</span> counter by item<sub><var>n</var></sub>,
		then the following HTML fragment will use the indicated counters.</p>
    <div class="ol">
     <div class="ol">
      <code>&lt;ol></code> item<sub>0</sub> is created, set to 0 
      <div class="li"><code>&lt;li></code> item<sub>0</sub> is incremented to 1</div>
      <div class="li">
       <code>&lt;li></code> item<sub>0</sub> is incremented to 2 
       <div class="ol">
        <code>&lt;ol></code> item<sub>1</sub> is created, set to 0, nested in item<sub>0</sub> 
        <div class="li"><code>&lt;li></code> item<sub>1</sub> is incremented to 1</div>
        <div class="li"><code>&lt;li></code> item<sub>1</sub> is incremented to 2</div>
        <div class="li">
         <code>&lt;li></code> item<sub>1</sub> is incremented to 3 
         <div class="ol">
          <code>&lt;ol></code> item<sub>2</sub> is created, set to 0, nested in item<sub>1</sub> 
          <div class="li"><code>&lt;li></code> item<sub>2</sub> is incremented to 1</div>
           <code>&lt;/ol></code> 
         </div>
        </div>
        <div class="li">
         <code>&lt;li></code> item<sub>1</sub> is incremented to 4 
         <div class="ol">
          <code>&lt;ol></code> item<sub>3</sub> is created, set to 0, nested in item<sub>1</sub> 
          <div class="li"><code>&lt;li></code> item<sub>3</sub> is incremented to 1</div>
           <code>&lt;/ol></code> 
         </div>
        </div>
        <div class="li"><code>&lt;li></code> item<sub>1</sub> is incremented to 5</div>
         <code>&lt;/ol></code> 
       </div>
      </div>
      <div class="li"><code>&lt;li></code> item<sub>0</sub> is incremented to 3</div>
      <div class="li"><code>&lt;li></code> item<sub>0</sub> is incremented to 4</div>
       <code>&lt;/ol></code> 
     </div>
     <div class="ol">
      <code>&lt;ol></code> item<sub>4</sub> is created, set to 0 
      <div class="li"><code>&lt;li></code> item<sub>4</sub> is incremented to 1</div>
      <div class="li"><code>&lt;li></code> item<sub>4</sub> is incremented to 2</div>
       <code>&lt;/ol></code> 
     </div>
    </div>
   </div>
   <h3 class="heading settled" data-level="4.4" id="creating-counters"><span class="secno">4.4. </span><span class="content"> Creating and Inheriting Counters</span><a class="self-link" href="#creating-counters"></a></h3>
   <p>Each element or pseudo-element in a document has
	a (possibly empty) set of <a data-link-type="dfn" href="#counter" id="ref-for-counter⑦">counters</a> in the <a data-link-type="dfn" href="#counter-scope" id="ref-for-counter-scope">scope</a> of that element,
	either through inheritance from another element
	or through instantiation on the element directly.
	These counters are represented as a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="css-counters-set">CSS counters set</dfn>,
	which is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-set" id="ref-for-ordered-set">set</a> whose values are each a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#tuple" id="ref-for-tuple">tuple</a> of:
	a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string">string</a> (representing a counter’s name),
	an element (representing the counter’s originating element),
	and an integer (representing the counter’s value).
	The latest <span id="ref-for-counter⑧">counter</span> of a given name in that set
	represents the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="innermost">innermost</dfn> counter of that name.</p>
   <h4 class="heading settled" data-level="4.4.1" id="inheriting-counters"><span class="secno">4.4.1. </span><span class="content"> Inheriting Counters</span><a class="self-link" href="#inheriting-counters"></a></h4>
   <div class="algorithm" data-algorithm="inherit counters">
     An element <a data-link-type="dfn" href="#inherit-counters" id="ref-for-inherit-counters①">inherits</a> its initial set of counters
		from its preceding <em>sibling</em>,
		or from its parent if it has none.
		It then takes the values for those counters
		from the values of the matching counters
		on its preceding <em>element in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order" id="ref-for-concept-tree-order">tree order</a></em> (which might be its parent,
		its preceding sibling,
		or a descendant of its previous sibling).
		To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="inherit-counters">inherit counters</dfn> into an <var>element</var>: 
    <ol>
     <li data-md>
      <p>Let <var>element counters</var> be an initially empty <a data-link-type="dfn" href="#css-counters-set" id="ref-for-css-counters-set">CSS counters set</a> representing <var>element</var>’s own <span id="ref-for-css-counters-set①">CSS counters set</span>.</p>
     <li data-md>
      <p>If <var>element</var> is the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-root" id="ref-for-concept-tree-root">root</a> of its document tree,
return.
(The element has an initially-empty counter map
and inherits nothing.)</p>
     <li data-md>
      <p>Let <var>counter source</var> be the <a data-link-type="dfn" href="#css-counters-set" id="ref-for-css-counters-set②">CSS counters set</a> of <var>element</var>’s preceding sibling,
if it has one,
or else of <var>element</var>’s parent
if it does not.</p>
     <li data-md>
      <p>Let <var>value source</var> be the <a data-link-type="dfn" href="#css-counters-set" id="ref-for-css-counters-set③">CSS counters set</a> of the element immediately preceding <var>element</var> in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order" id="ref-for-concept-tree-order①">tree order</a>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-iterate" id="ref-for-map-iterate">For each</a> (<var>name</var>, <var>originating element</var>, <var>value</var>) of <var>value source</var>:</p>
      <ol>
       <li data-md>
        <p>If <var>counter source</var> also <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-contain" id="ref-for-list-contain">contains</a> a <a data-link-type="dfn" href="#counter" id="ref-for-counter⑨">counter</a> with the same <var>name</var> and <var>originating element</var>,
then <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#set-append" id="ref-for-set-append">append</a> a copy of <var>value source</var>’s <span id="ref-for-counter①⓪">counter</span> (<var>name</var>, <var>originating element</var>, <var>value</var>)
to <var>element counters</var>.</p>
      </ol>
    </ol>
   </div>
   <div class="example" id="counter-inheritance-example">
    <a class="self-link" href="#counter-inheritance-example"></a> Take the following code as an example: 
<pre>&lt;ul style='counter-reset: example 0;'>
  <b class="foo">&lt;li id='foo' style='counter-increment: example;'></b>
    foo
    <b class="bar">&lt;div id='bar' style='counter-increment: example;'>bar&lt;/div></b>
  &lt;/li>
  <b class="baz">&lt;li id='baz'></b>
    baz
  &lt;/li>
&lt;/ul>
</pre>
    <p>Recall that <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order" id="ref-for-concept-tree-order②">tree order</a> turns a document tree into an ordered list,
		where an element comes before its children,
		and its children come before its next sibling.
		In other words,
		for a language like HTML,
		it’s the order in which the parser encounters start tags as it reads the document.</p>
    <p>In here, the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element" id="ref-for-the-ul-element②">ul</a></code> element establishes a new counter named <span class="css">example</span>,
		and sets its value to <span class="css">0</span>.
		The <b class="foo">#foo</b> element, being the first child of the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element" id="ref-for-the-ul-element③">ul</a></code>,
		inherits this counter.
		Its parent is also its immediately preceding element in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order" id="ref-for-concept-tree-order③">tree order</a>,
		so it inherits the value <span class="css">0</span> with it,
		and then immediately increments the value to <span class="css">1</span>.</p>
    <p>The same happens with the <b class="bar">#bar</b> element.
		It inherits the <span class="css">example</span> counter from <b class="foo">#foo</b>,
		and inherits the value <span class="css">1</span> from it as well
		and increments it to <span class="css">2</span>.</p>
    <p>However, the <b class="baz">#baz</b> element is a bit different.
		It inherits the <span class="css">example</span> counter from the <b class="foo">#foo</b> element,
		its previous sibling.
		However, rather than inheriting the value <span class="css">1</span> from <b class="foo">#foo</b> along with the counter,
		in inherits the value <span class="css">2</span> from <b class="bar">#bar</b>, the previous element in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order" id="ref-for-concept-tree-order④">tree order</a>.</p>
    <p>This behavior allows a single counter to be used throughout a document,
		continuously incrementing,
		without the author having to worry about the nested structure of their document.</p>
   </div>
   <p class="note" role="note"><span>Note:</span> Counter inheritance, like regular CSS <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#inheritance" id="ref-for-inheritance">inheritance</a>,
	operates on the “flattened element tree”
	in the context of the <a data-link-type="biblio" href="#biblio-dom">[DOM]</a>.</p>
   <h4 class="heading settled" data-level="4.4.2" id="instantiating-counters"><span class="secno">4.4.2. </span><span class="content"> Instantiating Counters</span><a class="self-link" href="#instantiating-counters"></a></h4>
   <div class="algorithm" data-algorithm="instantiate counter">
     <a data-link-type="dfn" href="#counter" id="ref-for-counter①①">Counters</a> are <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter⑦">instantiated</a> when named in <a class="property" data-link-type="propdesc" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset⑤">counter-reset</a>,
		and also when not otherwise present if named in <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment⑦">counter-increment</a>, <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set⑦">counter-set</a>, or the <a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter③">counter()</a> or <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters③">counters()</a> notations.
		(Newly <span id="ref-for-instantiate-counter⑧">instantiated</span> <span id="ref-for-counter①②">counters</span> replace identically-named <span id="ref-for-counter①③">counters</span> originating from previous siblings,
		but are added in addition to identically-named <span id="ref-for-counter①④">counters</span> originating from ancestor elements,
		see <a href="#nested-counters">§ 4.3 Nested Counters and Scope</a>.)
		To <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="instantiate" data-lt="instantiate counter" data-noexport id="instantiate-counter">instantiate a counter</dfn> of a given <var>name</var> on an <var>element</var> with a starting <var>value</var>: 
    <ol>
     <li data-md>
      <p>Let <var>counters</var> be <var>element</var>’s <a data-link-type="dfn" href="#css-counters-set" id="ref-for-css-counters-set④">CSS counters set</a>.</p>
     <li data-md>
      <p>Let <var>innermost counter</var> be the last <a data-link-type="dfn" href="#counter" id="ref-for-counter①⑤">counter</a> in <var>counters</var> with the name <var>name</var>.
If <var>innermost counter</var>’s originating element
is <var>element</var> or a previous sibling of <var>element</var>, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-remove" id="ref-for-list-remove">remove</a> <var>innermost counter</var> from <var>counters</var>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#set-append" id="ref-for-set-append①">Append</a> a new <a data-link-type="dfn" href="#counter" id="ref-for-counter①⑥">counter</a> to <var>counters</var> with name <var>name</var>,
originating element <var>element</var>,
and initial value <var>value</var></p>
    </ol>
   </div>
   <h3 class="heading settled" data-level="4.5" id="counters-without-boxes"><span class="secno">4.5. </span><span class="content"> Counters in elements that do not generate boxes</span><a class="self-link" href="#counters-without-boxes"></a></h3>
   <p>An element that does not generate a box
	(for example, an element with <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display①">display</a> set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-none" id="ref-for-valdef-display-none">none</a>, or a pseudo-element with <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content⑤">content</a> set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-content-3/#valdef-content-none" id="ref-for-valdef-content-none①">none</a>)
	cannot set, reset, or increment  a counter.
	The counter properties are still valid on such an element,
	but they must have no effect.</p>
   <div class="example" id="example-bdf0aac0">
    <a class="self-link" href="#example-bdf0aac0"></a> For example, with the following style sheet,
			H2s with class "secret" do not increment <span class="css">count2</span>. 
<pre class="highlight"><c- f>h2 </c-><c- p>{</c-> <c- k>counter-increment</c-><c- p>:</c-> count2<c- p>;</c-> <c- p>}</c->
<c- f>h2.secret </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> none<c- p>;</c-> <c- p>}</c->
</pre>
   </div>
   <p class="note" role="note"><span>Note:</span> Other methods of “hiding” elements,
	such as setting <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visufx.html#propdef-visibility" id="ref-for-propdef-visibility">visibility</a> to <span class="css">hidden</span>,
	still cause the element to generate a box,
	and so are not excepted here.</p>
   <p>Whether a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#replaced-element" id="ref-for-replaced-element①">replaced element’s</a> descendants
	(such as HTML <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element" id="ref-for-the-option-element">option</a></code>,
	or SVG <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-rect" id="ref-for-elementdef-rect">rect</a></code>)
	can set, reset, or increment a counter
	is undefined.</p>
   <p class="note" role="note"><span>Note:</span> The behavior on <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#replaced-element" id="ref-for-replaced-element②">replaced element</a> descendants is currently undefined
	due to a lack of interoperability across implementations.</p>
   <h3 class="heading settled" data-level="4.6" id="list-item-counter"><span class="secno">4.6. </span><span class="content"> The Implicit <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item④">list-item</a> Counter</span><a class="self-link" href="#list-item-counter"></a></h3>
   <p>In addition to any explicitly defined <a data-link-type="dfn" href="#counter" id="ref-for-counter①⑦">counters</a> that authors write in their styles, <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②①">list items</a> automatically increment
	a special <dfn class="dfn-paneled css" data-dfn-for="counter-increment, counter-set, counter-reset, counter(), counters()" data-dfn-type="value" data-export id="valdef-counter-increment-list-item">list-item</dfn> <span id="ref-for-counter①⑧">counter</span>,
	which is used when generating the default <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string⑥">marker string</a> on <span id="ref-for-list-item②②">list items</span> (see <a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type⑥">list-style-type</a>).</p>
   <p>Specifically,
	unless the <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment⑧">counter-increment</a> property explicitly specifies
	a different increment for the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item⑤">list-item</a> counter,
	it must be incremented by 1 on every <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②③">list item</a>,
	at the same time that <a data-link-type="dfn" href="#counter" id="ref-for-counter①⑨">counters</a> are normally incremented
	(exactly as if the <span id="ref-for-list-item②④">list item</span> had <span class="css">list-item 1</span> appended to their <span class="property" id="ref-for-propdef-counter-increment⑨">counter-increment</span> value,
	including side-effects such as possibly <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter⑨">instantiating</a> a new <span id="ref-for-counter②⓪">counter</span>, etc).
	This does not affect the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#specified-value" id="ref-for-specified-value">specified</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value">computed values</a> of <span class="property" id="ref-for-propdef-counter-increment①⓪">counter-increment</span>.</p>
   <div class="example" id="example-60f85b38">
    <a class="self-link" href="#example-60f85b38"></a> Because each <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②⑤">list item</a> automatically increments
		the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item⑥">list-item</a> counter by 1,
		consecutive <span id="ref-for-list-item②⑥">list items</span> with a numeric <a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type⑦">list-style-type</a> will be consecutively numbered by default—<wbr>even if the author sets <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment①①">counter-increment</a> to another value
		such as <span class="css" id="ref-for-propdef-counter-increment①②">counter-increment: itemnumber</span> or even <span class="css">none</span>.
		This protects the automatic <span class="css" id="ref-for-valdef-counter-increment-list-item⑦">list-item</span> counter
		from inadvertently being overridden
		by declarations intended to address other counters. 
    <p>However, since the automatic <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item⑧">list-item</a> increment <em>does not</em> happen
		if the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②⑦">list item’s</a> <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment①③">counter-increment</a> explicitly mentions the <span class="css" id="ref-for-valdef-counter-increment-list-item⑨">list-item</span> counter, <span class="css">li { counter-increment: list-item 2; }</span> will increment <span class="css" id="ref-for-valdef-counter-increment-list-item①⓪">list-item</span> by 2 as specified,
		not by 3 as would happen
		if <span class="css">list-item 1</span> were unconditionally appended.</p>
    <p>This also allows to turn off the automatic <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①①">list-item</a> counter increment,
		by overriding it explicitly, e.g. <a class="css" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment①④">counter-increment: list-item 0;</a>.</p>
   </div>
   <p>In all other respects, the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①②">list-item</a> <a data-link-type="dfn" href="#counter" id="ref-for-counter②①">counter</a> behaves like any other <span id="ref-for-counter②②">counter</span> and can be used and manipulated by authors
	to adjust <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②⑧">list item</a> styling
	or for other purposes.</p>
   <div class="example" id="example-0003035e">
    <a class="self-link" href="#example-0003035e"></a> 
    <p>In the following example,
		the list is modified to count by twos:</p>
<pre>ol.evens > li { counter-increment: list-item 2; }
</pre>
    <p>A three-item list would be rendered as</p>
<pre>2. First Item
4. Second Item
6. Third Item
</pre>
   </div>
   <p>UAs and host languages should ensure
	that the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①③">list-item</a> counter values
	by default
	reflect the underlying numeric value dictated by host language semantics
	when setting up list item styling
	in their UA style sheet and presentational hint style mappings.
	See, e.g. <a href="#ua-stylesheet">§ 5 Appendix A: Sample Style Sheet For HTML</a>.</p>
   <div class="example" id="example-598c7e61">
    <a class="self-link" href="#example-598c7e61"></a> In the following example,
		the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content⑥">content</a> property is used to create tiered numbering
		that hooks into the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①④">list-item</a> counter,
		and thus respects any numbering changes inflicted through HTML: 
<pre>ol > li::marker { content: counters(list-item,'.') '.'; }
</pre>
    <p>Nested lists using this rule would be rendered like</p>
<pre>1. First top-level item
5. Second top-level item, value=5
   5.3. First second-level item, list start=3
   5.4. Second second-level item, list start=3
        5.4.4. First third-level item in reversed list
        5.4.3. Second third-level item in reversed list
        5.4.2. Third third-level item in reversed list
        5.4.1. Fourth third-level item in reversed list
   5.5. Third second-level item, list start=3
6. Third top-level item
</pre>
    <p>given markup such as</p>
<pre>&lt;ol>
  &lt;li>First top-level item
  &lt;li value=5>Second top-level item, value=5
    &lt;ol start=3>
      &lt;li>First second-level item, list start=3
      &lt;li>Second second-level item, list start=3
        &lt;ol reversed>
          &lt;li>First third-level item in reversed list
          &lt;li>Second third-level item in reversed list
          &lt;li>Third third-level item in reversed list
          &lt;li>Fourth third-level item in reversed list
        &lt;/ol>
    &lt;/ol>
  &lt;li>Third second-level item, list start=3
  &lt;li>Third top-level item
&lt;/ol>
</pre>
   </div>
   <h3 class="heading settled" data-level="4.7" id="counter-functions"><span class="secno">4.7. </span><span class="content"> Outputting Counters: the <a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter④">counter()</a> and <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters④">counters()</a> functions</span><a class="self-link" href="#counter-functions"></a></h3>
   <p><a data-link-type="dfn" href="#counter" id="ref-for-counter②③">Counters</a> have no visible effect by themselves,
	but their values can be used
	with the <a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter⑤">counter()</a> and <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters⑤">counters()</a> functions,
	whose <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value">used values</a> represent counter values as strings or images.
	They are defined as follows:</p>
<pre><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-counter"><a class="production" data-link-type="type" href="#typedef-counter" id="ref-for-typedef-counter">&lt;counter></a></dfn> = <a class="production" data-link-type="function" href="#funcdef-counter" id="ref-for-funcdef-counter⑥">&lt;counter()></a> | <a class="production" data-link-type="function" href="#funcdef-counters" id="ref-for-funcdef-counters⑥">&lt;counters()></a>
<dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-counter">counter()</dfn>  =  counter( <a class="production" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①①">&lt;counter-name></a>, <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style⑦" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></a>? )
<dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-counters">counters()</dfn> = counters( <a class="production" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①②">&lt;counter-name></a>, <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value③">&lt;string></a>, <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style⑧" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></a>? )
</pre>
   <p>where <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style⑨" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></a> specifies the <a data-link-type="dfn" href="https://drafts.csswg.org/css-counter-styles-3/#counter-style" id="ref-for-counter-style">counter style</a> for <a data-link-type="dfn" href="https://drafts.csswg.org/css-counter-styles-3/#generate-a-counter" id="ref-for-generate-a-counter①">generating a representation</a> of the named counter(s)
	as defined in <a data-link-type="biblio" href="#biblio-css-counter-styles-3">[css-counter-styles-3]</a> and</p>
   <dl>
    <dt>counter() 
    <dd> Represents the value of the <a data-link-type="dfn" href="#innermost" id="ref-for-innermost①">innermost</a> <a data-link-type="dfn" href="#counter" id="ref-for-counter②④">counter</a> in the element’s <a data-link-type="dfn" href="#css-counters-set" id="ref-for-css-counters-set⑤">CSS counters set</a> named <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①③">&lt;counter-name></a> using the <a data-link-type="dfn" href="https://drafts.csswg.org/css-counter-styles-3/#counter-style" id="ref-for-counter-style①">counter style</a> named <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①⓪" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></a>. 
    <dt>counters() 
    <dd> Represents the values of all the <a data-link-type="dfn" href="#counter" id="ref-for-counter②⑤">counters</a> in the element’s <a data-link-type="dfn" href="#css-counters-set" id="ref-for-css-counters-set⑥">CSS counters set</a> named <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①④">&lt;counter-name></a> using the <a data-link-type="dfn" href="https://drafts.csswg.org/css-counter-styles-3/#counter-style" id="ref-for-counter-style②">counter style</a> named <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①①" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></a>,
			sorted in outermost-first to <a data-link-type="dfn" href="#innermost" id="ref-for-innermost②">innermost</a>-last order
			and joined by the specified <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value④">&lt;string></a>. 
   </dl>
   <p>In both cases,
	if the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①②" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></a> argument is omitted it defaults to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#decimal" id="ref-for-decimal①">decimal</a>.</p>
   <p>If no <a data-link-type="dfn" href="#counter" id="ref-for-counter②⑥">counter</a> named <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①⑤">&lt;counter-name></a> exists
	on an element where <a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter⑦">counter()</a> or <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters⑦">counters()</a> is used,
	one is first <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter①⓪">instantiated</a> with a starting value of <span class="css">0</span>.</p>
   <div class="example" id="example-a273a37d">
    <a class="self-link" href="#example-a273a37d"></a> 
<pre>H1::before        { content: counter(chno, upper-latin) ". " }
/* Generates headings like "A. A History of Discontent" */

H2::before        { content: counter(section, upper-roman) " - " }
/* Generates headings like "II - The Discontent Part" */

BLOCKQUOTE::after { content: " [" counter(bq, decimal) "]" }
/* Generates blockquotes that end like "... [3]" */

DIV.note::before  { content: counter(notecntr, disc) " " }
/* Simply generates a bullet before every div.note */

P::before         { content: counter(p, none) }
/* inserts nothing */
</pre>
   </div>
   <div class="example" id="example-e8a9db02">
    <a class="self-link" href="#example-e8a9db02"></a> The following example shows a simple use of the <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters⑧">counters()</a> function: 
<pre class="highlight"><c- p>&lt;</c-><c- f>ul</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>></c->one<c- p>&lt;/</c-><c- f>li</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>></c->two
    <c- p>&lt;</c-><c- f>ul</c-><c- p>></c->
      <c- p>&lt;</c-><c- f>li</c-><c- p>></c->nested one<c- p>&lt;/</c-><c- f>li</c-><c- p>></c->
      <c- p>&lt;</c-><c- f>li</c-><c- p>></c->nested two<c- p>&lt;/</c-><c- f>li</c-><c- p>></c->
    <c- p>&lt;/</c-><c- f>ul</c-><c- p>></c->
  <c- p>&lt;/</c-><c- f>li</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>></c->three<c- p>&lt;/</c-><c- f>li</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>ul</c-><c- p>></c->
<c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- f>li</c-><c- p>::</c-><c- nd>marker</c-> <c- p>{</c-> <c- k>content</c-><c- p>:</c-> <c- t>'('</c-> <c- nf>counters</c-><c- p>(</c-><c- kc>list-item</c-><c- p>,</c-><c- t>'.'</c-><c- p>)</c-> <c- t>') '</c-><c- p>;</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
</pre>
    <p>The preceding document should render something like this:</p>
<pre>(1) one
(2) two
   (2.1) nested one
   (2.2) nested two
(3) three
</pre>
   </div>
   <div class="example" id="example-b1a4542d">
    <a class="self-link" href="#example-b1a4542d"></a> Because counters inherit to siblings as well,
		they can be used to number headings and subheadings,
		which aren’t nested within each other.
		Unfortunately,
		this prevents the use of <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters⑨">counters()</a> as counters from siblings don’t nest,
		but one can create multiple counters and manually concatenate them instead: 
<pre class="highlight"><c- p>&lt;</c-><c- f>h1</c-><c- p>></c->First H1<c- p>&lt;/</c-><c- f>h1</c-><c- p>></c->
...
<c- p>&lt;</c-><c- f>h2</c-><c- p>></c->First H2 in H1<c- p>&lt;/</c-><c- f>h2</c-><c- p>></c->
...
<c- p>&lt;</c-><c- f>h2</c-><c- p>></c->Second H2 in H1<c- p>&lt;/</c-><c- f>h2</c-><c- p>></c->
...
<c- p>&lt;</c-><c- f>h3</c-><c- p>></c->First H3 in H2<c- p>&lt;/</c-><c- f>h3</c-><c- p>></c->
...
<c- p>&lt;</c-><c- f>h1</c-><c- p>></c->Second H1<c- p>&lt;/</c-><c- f>h1</c-><c- p>></c->
...
<c- p>&lt;</c-><c- f>h2</c-><c- p>></c->First H2 in H1<c- p>&lt;/</c-><c- f>h2</c-><c- p>></c->
...
<c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- f>body</c-> <c- p>{</c-> <c- k>counter-reset</c-><c- p>:</c-> <c- n>h1</c-> <c- n>h2</c-> <c- n>h3</c-><c- p>;</c-> <c- p>}</c->
<c- f>h1</c->   <c- p>{</c-> <c- k>counter-increment</c-><c- p>:</c-> <c- n>h1</c-><c- p>;</c-> <c- k>counter-reset</c-><c- p>:</c-> <c- n>h2</c-> <c- n>h3</c-><c- p>;}</c->
<c- f>h2</c->   <c- p>{</c-> <c- k>counter-increment</c-><c- p>:</c-> <c- n>h2</c-><c- p>;</c-> <c- k>counter-reset</c-><c- p>:</c->    <c- n>h3</c-><c- p>;</c-> <c- p>}</c->
<c- f>h3</c->   <c- p>{</c-> <c- k>counter-increment</c-><c- p>:</c-> <c- n>h3</c-><c- p>;</c-> <c- p>}</c->
<c- f>h1</c-><c- p>::</c-><c- nd>before</c-> <c- p>{</c-> <c- k>content</c-><c- p>:</c-> counter<c- p>(</c-><c- n>h1</c-><c- p>,</c-><c- kc>upper-alpha</c-><c- p>)</c-> <c- t>' '</c-><c- p>;</c-> <c- p>}</c->
<c- f>h2</c-><c- p>::</c-><c- nd>before</c-> <c- p>{</c-> <c- k>content</c-><c- p>:</c-> counter<c- p>(</c-><c- n>h1</c-><c- p>,</c-><c- kc>upper-alpha</c-><c- p>)</c-> <c- t>'.'</c->
                      counter<c- p>(</c-><c- n>h2</c-><c- p>,</c-><c- kc>decimal</c-><c- p>)</c-> <c- t>' '</c-><c- p>;</c-> <c- p>}</c->
<c- f>h3</c-><c- p>::</c-><c- nd>before</c-> <c- p>{</c-> <c- k>content</c-><c- p>:</c-> counter<c- p>(</c-><c- n>h1</c-><c- p>,</c-><c- kc>upper-alpha</c-><c- p>)</c-> <c- t>'.'</c->
                      counter<c- p>(</c-><c- n>h2</c-><c- p>,</c-><c- kc>decimal</c-><c- p>)</c-> <c- t>'.'</c->
                      counter<c- p>(</c-><c- n>h3</c-><c- p>,</c-><c- kc>lower-roman</c-><c- p>)</c-> <c- t>' '</c-><c- p>;</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
</pre>
    <p>The preceding document should render something like this:</p>
<pre>A First H1
...
A.1 First H2 in H1
...
A.2 Second H2 in H1
...
A.2.i First H3 in H2
...
B Second H1
...
B.1 First H2 in H1
...
</pre>
   </div>
   <div class="issue" id="issue-4b0c2d48">
    <a class="self-link" href="#issue-4b0c2d48"></a> Counters are sometimes useful for things other than printing markers.
		In general, they provide the ability to number elements in sequence,
		which can be useful for other properties to reference.
		For example, using <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-flexbox-1/#propdef-order" id="ref-for-propdef-order">order</a> to put an element between two other specific elements
		currently requires you to explicitly put <span class="property" id="ref-for-propdef-order①">order</span> on every element before and/or after the desired insertion point.
		If you can set the <span class="property" id="ref-for-propdef-order②">order</span> value of everything to a counter, tho,
		you can more easily insert an element into an arbitrary spot between two others. 
    <p>Other use-cases involve nested or sibling elements with transforms that are meant to be slightly different from each other.
		Today you have to use a preprocessor to do this in a reasonable way,
		but a counter would make it work well in "plain" CSS.</p>
    <p>(You can built up successive values in the nested case today
		by using <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property">custom properties</a> and stacking up nested <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc">calc()</a>s,
		but this is a *little bit* clumsy,
		and doesn’t work for siblings.)</p>
    <p>Suggestion is to add a <span class="css">counter-value(<a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①⑥">&lt;counter-name></a>)</span> function,
		which returns the value of the named counter as an integer,
		rather than returning a string.</p>
    <p>See <a href="https://github.com/w3c/csswg-drafts/issues/1026">Issue 1026</a>.</p>
   </div>
   <h2 class="heading settled" data-level="5" id="ua-stylesheet"><span class="secno">5. </span><span class="content"> Appendix A: Sample Style Sheet For HTML</span><a class="self-link" href="#ua-stylesheet"></a></h2>
   <p><em>This section is informative, not normative.
	The <a data-link-type="biblio" href="#biblio-html">[HTML]</a> <a href="https://html.spec.whatwg.org/multipage/rendering.html#lists">Rendering</a> chapter
	defines the normative default properties that apply to HTML lists;
	this sample style sheet is provided to illustrate the CSS features
	using familiar markup conventions.</em></p>
   <p class="issue" id="issue-33887700"><a class="self-link" href="#issue-33887700"></a> Discussion of how to support <code>ol[reversed]</code> list numbering in CSS is ongoing.
	See, e.g. <a href="https://github.com/w3c/csswg-drafts/issues/4181">Issue 4181</a>.</p>
<pre>/* Set up list items */
li {
  display: list-item; /* implies 'counter-increment: list-item' */
}

/* Set up ol and ul so that they scope the list-item counter */
ol, ul {
  counter-reset: list-item;
}

/* Default list style types for lists */
ol { list-style-type: decimal; }
ul { list-style-type: toggle(disc, circle, square); }

/* The type attribute on ol and ul elements */
ul[type="disc"]   { list-style-type: disc;   }
ul[type="circle"] { list-style-type: circle; }
ul[type="square"] { list-style-type: square; }
ol[type="1"] { list-style-type: decimal;     }
ol[type="a"] { list-style-type: lower-alpha; }
ol[type="A"] { list-style-type: upper-alpha; }
ol[type="i"] { list-style-type: lower-roman; }
ol[type="I"] { list-style-type: upper-roman; }

/* The start attribute on ol elements */
ol[start] {
  counter-reset: list-item calc(attr(start integer, 1) - 1);
}

/* The value attribute on li elements */
li[value] {
  counter-set: list-item attr(value integer, 1);
}


/* Box Model Rules */
ol, ul {
  display: block;
  margin-block: 1em;
  marker-side: match-parent;
  padding-inline-start: 40px;
}
ol ol, ol ul, ul ul, ul ol {
  margin-block: 0;
}

li {
  text-align: match-parent;
}

li::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}
</pre>
   <h2 class="no-num heading settled" id="acknowledgments"><span class="content"> Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>This specification is made possible by input from
	Aharon Lanin,
	Arron Eicholz,
	Brad Kemper,
	David Baron,
	Emilio Cobos Álvarez,
	Mats Palmgren,
	Oriol Brufau,
	Simon Sapin,
	Xidorn Quan </p>
   <h2 class="no-num heading settled" id="changes"><span class="content">Changes</span><a class="self-link" href="#changes"></a></h2>
   <p>This section documents the changes since previous publications.</p>
   <h3 class="heading settled" id="changes-20190817"><span class="content">Changes since the 17 August 2019 WD</span><a class="self-link" href="#changes-20190817"></a></h3>
   <ul>
    <li>Specify that <a class="css" data-link-type="maybe" href="#list-style-position-outside" id="ref-for-list-style-position-outside①">outside</a> list markers are <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#blockify" id="ref-for-blockify①">blockified</a>. 
   </ul>
   <h3 class="heading settled" id="changes-20190425"><span class="content">Changes since the 25 April 2019 WD</span><a class="self-link" href="#changes-20190425"></a></h3>
   <ul>
    <li>Rewrite the <a href="#auto-numbering">§ 4 Automatic Numbering With Counters</a> section for better precision, editorial clarity, and synchronization with CSS2. 
   </ul>
   <h3 class="heading settled" id="changes-20140320"><span class="content">Changes since the 20 March 2014 WD</span><a class="self-link" href="#changes-20140320"></a></h3>
   <ul>
    <li>Use <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value①">&lt;custom-ident></a> consistently for counter names. 
    <li>Dropped <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position">position: marker</a> (marker positioning is now mostly undefined, as in CSS2). 
    <li>Completely rewrote chapter on markers to tighten it up,
		    align with current expectations, and make editorial improvements. 
    <li>Pulled the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①⑤">list-item</a> counter definition
		    into its own section, added examples, and made some clarifications. 
    <li>Renamed values of <a class="property" data-link-type="propdesc" href="#propdef-marker-side" id="ref-for-propdef-marker-side④">marker-side</a> to match conventions from box/text alignment. 
    <li>Defined that <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set⑧">counter-set</a> is applied after <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment①⑤">counter-increment</a> rather than before.
		    (<a href="https://github.com/w3c/csswg-drafts/issues/3810">Issue 3810</a>) 
    <li>Established the canonical order of <a class="property" data-link-type="propdesc" href="#propdef-list-style" id="ref-for-propdef-list-style⑤">list-style</a> serialization
		    to put <a class="production" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type⑧">&lt;'list-style-type'></a> last.
		    (<a href="https://github.com/w3c/csswg-drafts/issues/2624">Issue 2624</a>) 
   </ul>
   <h3 class="heading settled" id="changes-from-css2"><span class="content">Changes From CSS Level 2</span><a class="self-link" href="#changes-from-css2"></a></h3>
   <p>As described in the introduction section,
	there are significant changes in this module when compared to CSS2.1. </p>
   <ol>
    <li>The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①⑧">::marker</a> pseudo-element has been introduced to allow styling of the list marker directly. 
    <li><a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type⑨">list-style-type</a> now accepts a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value⑤">&lt;string></a> as well as the extended <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①③" title="Expands to: simp-chinese-formal | simp-chinese-informal | japanese-informal | trad-chinese-formal | cjk-ideographic | japanese-formal | trad-chinese-informal">&lt;counter-style></a> values from <a data-link-type="biblio" href="#biblio-css-counter-styles-3">[css-counter-styles-3]</a>.. 
    <li>The <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①⑥">list-item</a> predefined counter identifier has been introduced. 
    <li>The <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set⑨">counter-set</a> property has been added. 
    <li>Allowed for <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-level" id="ref-for-inline-level">inline-level</a> <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②⑨">list items</a>, as introduced in <a data-link-type="biblio" href="#biblio-css-display-3">[CSS-DISPLAY-3]</a>. 
   </ol>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#typedef-counter">&lt;counter></a><span>, in §4.7</span>
   <li><a href="#funcdef-counter">counter()</a><span>, in §4.7</span>
   <li><a href="#counter">counter</a><span>, in §4</span>
   <li><a href="#propdef-counter-increment">counter-increment</a><span>, in §4.2</span>
   <li><a href="#typedef-counter-name">&lt;counter-name></a><span>, in §4</span>
   <li>
    &lt;counter-name> &lt;integer>?
    <ul>
     <li><a href="#valdef-counter-reset-counter-name-integer">value for counter-reset</a><span>, in §4.1</span>
     <li><a href="#valdef-counter-set-counter-increment-counter-name-integer">value for counter-set counter-increment</a><span>, in §4.2</span>
    </ul>
   <li><a href="#counter-properties">counter properties</a><span>, in §4</span>
   <li><a href="#propdef-counter-reset">counter-reset</a><span>, in §4.1</span>
   <li><a href="#funcdef-counters">counters()</a><span>, in §4.7</span>
   <li><a href="#counter-scope">counter scope</a><span>, in §4.3</span>
   <li><a href="#propdef-counter-set">counter-set</a><span>, in §4.2</span>
   <li><a href="#valdef-list-style-type-counter-style">&lt;counter-style></a><span>, in §3.4</span>
   <li><a href="#css-counters-set">CSS counters set</a><span>, in §4.4</span>
   <li><a href="#valdef-list-style-image-image">&lt;image></a><span>, in §3.3</span>
   <li><a href="#inherit-counters">inherit counters</a><span>, in §4.4.1</span>
   <li><a href="#innermost">innermost</a><span>, in §4.4</span>
   <li><a href="#valdef-list-style-position-inside">inside</a><span>, in §3.5</span>
   <li><a href="#instantiate-counter">instantiate</a><span>, in §4.4.2</span>
   <li><a href="#instantiate-counter">instantiate counter</a><span>, in §4.4.2</span>
   <li><a href="#list-item">list item</a><span>, in §2</span>
   <li><a href="#valdef-counter-increment-list-item">list-item</a><span>, in §4.6</span>
   <li><a href="#propdef-list-style">list-style</a><span>, in §3.6</span>
   <li><a href="#propdef-list-style-image">list-style-image</a><span>, in §3.3</span>
   <li><a href="#propdef-list-style-position">list-style-position</a><span>, in §3.5</span>
   <li><a href="#propdef-list-style-type">list-style-type</a><span>, in §3.4</span>
   <li><a href="#marker">marker</a><span>, in §3</span>
   <li><a href="#marker">marker box</a><span>, in §3</span>
   <li><a href="#marker-image">marker image</a><span>, in §3.3</span>
   <li><a href="#propdef-marker-side">marker-side</a><span>, in §3.7</span>
   <li><a href="#marker-string">marker string</a><span>, in §3.4</span>
   <li><a href="#valdef-marker-side-match-parent">match-parent</a><span>, in §3.7</span>
   <li><a href="#valdef-marker-side-match-self">match-self</a><span>, in §3.7</span>
   <li>
    none
    <ul>
     <li><a href="#valdef-counter-reset-none">value for counter-reset</a><span>, in §4.1</span>
     <li><a href="#valdef-counter-set-counter-increment-none">value for counter-set counter-increment</a><span>, in §4.2</span>
     <li><a href="#valdef-list-style-image-none">value for list-style-image</a><span>, in §3.3</span>
     <li><a href="#valdef-list-style-type-none">value for list-style-type</a><span>, in §3.4</span>
    </ul>
   <li><a href="#list-style-position-outside">outside</a><span>, in §3.5</span>
   <li><a href="#counter-scope">scope</a><span>, in §4.3</span>
   <li><a href="#valdef-list-style-type-string">&lt;string></a><span>, in §3.4</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-cascade">
   <a href="https://drafts.csswg.org/css-cascade-4/#cascade">https://drafts.csswg.org/css-cascade-4/#cascade</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cascade">4.1. 
Creating Counters: the counter-reset property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-computed-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#computed-value">https://drafts.csswg.org/css-cascade-4/#computed-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-value">4.6. 
The Implicit list-item Counter</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inheritance">
   <a href="https://drafts.csswg.org/css-cascade-4/#inheritance">https://drafts.csswg.org/css-cascade-4/#inheritance</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inheritance">4.4.1. 
Inheriting Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-specified-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#specified-value">https://drafts.csswg.org/css-cascade-4/#specified-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-specified-value">4.6. 
The Implicit list-item Counter</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-used-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#used-value">https://drafts.csswg.org/css-cascade-4/#used-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-used-value">4.7. 
Outputting Counters: the counter() and counters() functions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-content">
   <a href="https://drafts.csswg.org/css-content-3/#propdef-content">https://drafts.csswg.org/css-content-3/#propdef-content</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-content">3.1. 
The ::marker Pseudo-Element</a>
    <li><a href="#ref-for-propdef-content①">3.2. 
Generating Marker Contents</a> <a href="#ref-for-propdef-content②">(2)</a>
    <li><a href="#ref-for-propdef-content③">3.3. 
Image Markers: the list-style-image property</a>
    <li><a href="#ref-for-propdef-content④">3.4. 
Text-based Markers: the list-style-type property</a>
    <li><a href="#ref-for-propdef-content⑤">4.5. 
Counters in elements that do not generate boxes</a>
    <li><a href="#ref-for-propdef-content⑥">4.6. 
The Implicit list-item Counter</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-content-none">
   <a href="https://drafts.csswg.org/css-content-3/#valdef-content-none">https://drafts.csswg.org/css-content-3/#valdef-content-none</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-content-none">3.1. 
The ::marker Pseudo-Element</a>
    <li><a href="#ref-for-valdef-content-none①">4.5. 
Counters in elements that do not generate boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-content-normal">
   <a href="https://drafts.csswg.org/css-content-3/#valdef-content-normal">https://drafts.csswg.org/css-content-3/#valdef-content-normal</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-content-normal">3.2. 
Generating Marker Contents</a>
    <li><a href="#ref-for-valdef-content-normal①">3.3. 
Image Markers: the list-style-image property</a>
    <li><a href="#ref-for-valdef-content-normal②">3.4. 
Text-based Markers: the list-style-type property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-counter-style">
   <a href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style">https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-counter-style">3.4. 
Text-based Markers: the list-style-type property</a> <a href="#ref-for-typedef-counter-style①">(2)</a> <a href="#ref-for-typedef-counter-style②">(3)</a> <a href="#ref-for-typedef-counter-style③">(4)</a> <a href="#ref-for-typedef-counter-style④">(5)</a> <a href="#ref-for-typedef-counter-style⑤">(6)</a> <a href="#ref-for-typedef-counter-style⑥">(7)</a>
    <li><a href="#ref-for-typedef-counter-style⑦">4.7. 
Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-typedef-counter-style⑧">(2)</a> <a href="#ref-for-typedef-counter-style⑨">(3)</a> <a href="#ref-for-typedef-counter-style①⓪">(4)</a> <a href="#ref-for-typedef-counter-style①①">(5)</a> <a href="#ref-for-typedef-counter-style①②">(6)</a>
    <li><a href="#ref-for-typedef-counter-style①③">Changes From CSS Level 2</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-counter-style">
   <a href="https://drafts.csswg.org/css-counter-styles-3/#counter-style">https://drafts.csswg.org/css-counter-styles-3/#counter-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-counter-style">4.7. 
Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-counter-style①">(2)</a> <a href="#ref-for-counter-style②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-decimal">
   <a href="https://drafts.csswg.org/css-counter-styles-3/#decimal">https://drafts.csswg.org/css-counter-styles-3/#decimal</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-decimal">3.4. 
Text-based Markers: the list-style-type property</a>
    <li><a href="#ref-for-decimal①">4.7. 
Outputting Counters: the counter() and counters() functions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-generate-a-counter">
   <a href="https://drafts.csswg.org/css-counter-styles-3/#generate-a-counter">https://drafts.csswg.org/css-counter-styles-3/#generate-a-counter</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-generate-a-counter">3.4. 
Text-based Markers: the list-style-type property</a>
    <li><a href="#ref-for-generate-a-counter①">4.7. 
Outputting Counters: the counter() and counters() functions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-descdef-counter-style-prefix">
   <a href="https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-prefix">https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-prefix</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descdef-counter-style-prefix">3.4. 
Text-based Markers: the list-style-type property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-descdef-counter-style-suffix">
   <a href="https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-suffix">https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-suffix</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descdef-counter-style-suffix">3.4. 
Text-based Markers: the list-style-type property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-anonymous">
   <a href="https://drafts.csswg.org/css-display-3/#anonymous">https://drafts.csswg.org/css-display-3/#anonymous</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-anonymous">3.2. 
Generating Marker Contents</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-container">
   <a href="https://drafts.csswg.org/css-display-3/#block-container">https://drafts.csswg.org/css-display-3/#block-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-container">3.5. 
Positioning Markers: The list-style-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-blockify">
   <a href="https://drafts.csswg.org/css-display-3/#blockify">https://drafts.csswg.org/css-display-3/#blockify</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-blockify">3.5. 
Positioning Markers: The list-style-position property</a>
    <li><a href="#ref-for-blockify①">Changes since the 17 August 2019 WD</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-display">
   <a href="https://drafts.csswg.org/css-display-3/#propdef-display">https://drafts.csswg.org/css-display-3/#propdef-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display">2. 
Declaring a List Item</a>
    <li><a href="#ref-for-propdef-display①">4.5. 
Counters in elements that do not generate boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-display-type">
   <a href="https://drafts.csswg.org/css-display-3/#display-type">https://drafts.csswg.org/css-display-3/#display-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-display-type">1. 
Introduction</a>
    <li><a href="#ref-for-display-type①">3. 
Markers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline">
   <a href="https://drafts.csswg.org/css-display-3/#inline">https://drafts.csswg.org/css-display-3/#inline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline">3.2. 
Generating Marker Contents</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-box">
   <a href="https://drafts.csswg.org/css-display-3/#inline-box">https://drafts.csswg.org/css-display-3/#inline-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-box">3.5. 
Positioning Markers: The list-style-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-level">
   <a href="https://drafts.csswg.org/css-display-3/#inline-level">https://drafts.csswg.org/css-display-3/#inline-level</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-level">Changes From CSS Level 2</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-list-item">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-list-item">https://drafts.csswg.org/css-display-3/#valdef-display-list-item</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-list-item">2. 
Declaring a List Item</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-none">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-none">https://drafts.csswg.org/css-display-3/#valdef-display-none</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-none">4.5. 
Counters in elements that do not generate boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-principal-box">
   <a href="https://drafts.csswg.org/css-display-3/#principal-box">https://drafts.csswg.org/css-display-3/#principal-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-principal-box">3.5. 
Positioning Markers: The list-style-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-replaced-element">
   <a href="https://drafts.csswg.org/css-display-3/#replaced-element">https://drafts.csswg.org/css-display-3/#replaced-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-replaced-element">3.2. 
Generating Marker Contents</a>
    <li><a href="#ref-for-replaced-element①">4.5. 
Counters in elements that do not generate boxes</a> <a href="#ref-for-replaced-element②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-text-run">
   <a href="https://drafts.csswg.org/css-display-3/#text-run">https://drafts.csswg.org/css-display-3/#text-run</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-text-run">3.2. 
Generating Marker Contents</a> <a href="#ref-for-text-run①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-order">
   <a href="https://drafts.csswg.org/css-flexbox-1/#propdef-order">https://drafts.csswg.org/css-flexbox-1/#propdef-order</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-order">4.7. 
Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-propdef-order①">(2)</a> <a href="#ref-for-propdef-order②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalid-image">
   <a href="https://drafts.csswg.org/css-images-4/#invalid-image">https://drafts.csswg.org/css-images-4/#invalid-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalid-image">3.3. 
Image Markers: the list-style-image property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-overflow">
   <a href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">https://drafts.csswg.org/css-overflow-3/#propdef-overflow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-overflow">3.5. 
Positioning Markers: The list-style-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-overflow-visible">
   <a href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible">https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-overflow-visible">3.5. 
Positioning Markers: The list-style-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-position">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-position">https://drafts.csswg.org/css-position-3/#propdef-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-position">Changes since the 20 March 2014 WD</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-before">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-before">https://drafts.csswg.org/css-pseudo-4/#selectordef-before</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-before">3.1. 
The ::marker Pseudo-Element</a>
    <li><a href="#ref-for-selectordef-before①">3.2. 
Generating Marker Contents</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-marker">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker">https://drafts.csswg.org/css-pseudo-4/#selectordef-marker</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-marker">1. 
Introduction</a>
    <li><a href="#ref-for-selectordef-marker①">2. 
Declaring a List Item</a>
    <li><a href="#ref-for-selectordef-marker②">3. 
Markers</a>
    <li><a href="#ref-for-selectordef-marker③">3.1. 
The ::marker Pseudo-Element</a> <a href="#ref-for-selectordef-marker④">(2)</a> <a href="#ref-for-selectordef-marker⑤">(3)</a> <a href="#ref-for-selectordef-marker⑥">(4)</a> <a href="#ref-for-selectordef-marker⑦">(5)</a>
    <li><a href="#ref-for-selectordef-marker⑧">3.2. 
Generating Marker Contents</a> <a href="#ref-for-selectordef-marker⑨">(2)</a>
    <li><a href="#ref-for-selectordef-marker①⓪">3.5. 
Positioning Markers: The list-style-position property</a> <a href="#ref-for-selectordef-marker①①">(2)</a>
    <li><a href="#ref-for-selectordef-marker①②">3.7. 
The marker-side property</a> <a href="#ref-for-selectordef-marker①③">(2)</a> <a href="#ref-for-selectordef-marker①④">(3)</a> <a href="#ref-for-selectordef-marker①⑤">(4)</a> <a href="#ref-for-selectordef-marker①⑥">(5)</a> <a href="#ref-for-selectordef-marker①⑦">(6)</a>
    <li><a href="#ref-for-selectordef-marker①⑧">Changes From CSS Level 2</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-invalid">
   <a href="https://drafts.csswg.org/css-syntax-3/#css-invalid">https://drafts.csswg.org/css-syntax-3/#css-invalid</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-invalid">4. 
Automatic Numbering With Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-integer-value">
   <a href="https://drafts.csswg.org/css-values-3/#integer-value">https://drafts.csswg.org/css-values-3/#integer-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-integer-value">4.1. 
Creating Counters: the counter-reset property</a> <a href="#ref-for-integer-value①">(2)</a> <a href="#ref-for-integer-value②">(3)</a>
    <li><a href="#ref-for-integer-value③">4.2. 
Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-integer-value④">(2)</a> <a href="#ref-for-integer-value⑤">(3)</a> <a href="#ref-for-integer-value⑥">(4)</a> <a href="#ref-for-integer-value⑦">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-string-value">
   <a href="https://drafts.csswg.org/css-values-3/#string-value">https://drafts.csswg.org/css-values-3/#string-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-string-value">3.4. 
Text-based Markers: the list-style-type property</a> <a href="#ref-for-string-value①">(2)</a> <a href="#ref-for-string-value②">(3)</a>
    <li><a href="#ref-for-string-value③">4.7. 
Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-string-value④">(2)</a>
    <li><a href="#ref-for-string-value⑤">Changes From CSS Level 2</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-one-plus">
   <a href="https://drafts.csswg.org/css-values-4/#mult-one-plus">https://drafts.csswg.org/css-values-4/#mult-one-plus</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-one-plus">4.1. 
Creating Counters: the counter-reset property</a>
    <li><a href="#ref-for-mult-one-plus①">4.2. 
Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-mult-one-plus②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-identifier-value">
   <a href="https://drafts.csswg.org/css-values-4/#identifier-value">https://drafts.csswg.org/css-values-4/#identifier-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-identifier-value">4. 
Automatic Numbering With Counters</a>
    <li><a href="#ref-for-identifier-value①">Changes since the 20 March 2014 WD</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">4.1. 
Creating Counters: the counter-reset property</a>
    <li><a href="#ref-for-mult-opt①">4.2. 
Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-mult-opt②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-calc">
   <a href="https://drafts.csswg.org/css-values-4/#funcdef-calc">https://drafts.csswg.org/css-values-4/#funcdef-calc</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-calc">4.7. 
Outputting Counters: the counter() and counters() functions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-functional-notation">
   <a href="https://drafts.csswg.org/css-values-4/#functional-notation">https://drafts.csswg.org/css-values-4/#functional-notation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-functional-notation">4. 
Automatic Numbering With Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">3.3. 
Image Markers: the list-style-image property</a>
    <li><a href="#ref-for-comb-one①">3.4. 
Text-based Markers: the list-style-type property</a> <a href="#ref-for-comb-one②">(2)</a>
    <li><a href="#ref-for-comb-one③">3.5. 
Positioning Markers: The list-style-position property</a>
    <li><a href="#ref-for-comb-one④">3.7. 
The marker-side property</a>
    <li><a href="#ref-for-comb-one⑤">4.1. 
Creating Counters: the counter-reset property</a>
    <li><a href="#ref-for-comb-one⑥">4.2. 
Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-comb-one⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-any">
   <a href="https://drafts.csswg.org/css-values-4/#comb-any">https://drafts.csswg.org/css-values-4/#comb-any</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-any">3.6. 
Styling Markers: the list-style shorthand property</a> <a href="#ref-for-comb-any①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-custom-property">
   <a href="https://drafts.csswg.org/css-variables-1/#custom-property">https://drafts.csswg.org/css-variables-1/#custom-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-property">4.7. 
Outputting Counters: the counter() and counters() functions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-start">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-start">https://drafts.csswg.org/css-writing-modes-4/#inline-start</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-start">3.5. 
Positioning Markers: The list-style-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode">https://drafts.csswg.org/css-writing-modes-4/#writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-writing-mode">3.5. 
Positioning Markers: The list-style-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-visibility">
   <a href="https://drafts.csswg.org/css2/visufx.html#propdef-visibility">https://drafts.csswg.org/css2/visufx.html#propdef-visibility</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-visibility">4.5. 
Counters in elements that do not generate boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-image">
   <a href="https://drafts.csswg.org/css-images-3/#typedef-image">https://drafts.csswg.org/css-images-3/#typedef-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-image">3.3. 
Image Markers: the list-style-image property</a> <a href="#ref-for-typedef-image①">(2)</a> <a href="#ref-for-typedef-image②">(3)</a> <a href="#ref-for-typedef-image③">(4)</a> <a href="#ref-for-typedef-image④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-root">
   <a href="https://dom.spec.whatwg.org/#concept-tree-root">https://dom.spec.whatwg.org/#concept-tree-root</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-root">4.4.1. 
Inheriting Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-order">
   <a href="https://dom.spec.whatwg.org/#concept-tree-order">https://dom.spec.whatwg.org/#concept-tree-order</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-order">4.4.1. 
Inheriting Counters</a> <a href="#ref-for-concept-tree-order①">(2)</a> <a href="#ref-for-concept-tree-order②">(3)</a> <a href="#ref-for-concept-tree-order③">(4)</a> <a href="#ref-for-concept-tree-order④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-li-element">
   <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-li-element">3.6. 
Styling Markers: the list-style shorthand property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-ol-element">
   <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-ol-element">3.6. 
Styling Markers: the list-style shorthand property</a>
    <li><a href="#ref-for-the-ol-element①">4.3. 
Nested Counters and Scope</a> <a href="#ref-for-the-ol-element②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-option-element">
   <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-option-element">4.5. 
Counters in elements that do not generate boxes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-ul-element">
   <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-ul-element">3.6. 
Styling Markers: the list-style shorthand property</a> <a href="#ref-for-the-ul-element①">(2)</a>
    <li><a href="#ref-for-the-ul-element②">4.4.1. 
Inheriting Counters</a> <a href="#ref-for-the-ul-element③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-set-append">
   <a href="https://infra.spec.whatwg.org/#set-append">https://infra.spec.whatwg.org/#set-append</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-append">4.4.1. 
Inheriting Counters</a>
    <li><a href="#ref-for-set-append①">4.4.2. 
Instantiating Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-contain">
   <a href="https://infra.spec.whatwg.org/#list-contain">https://infra.spec.whatwg.org/#list-contain</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-contain">4.4.1. 
Inheriting Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-iterate">
   <a href="https://infra.spec.whatwg.org/#map-iterate">https://infra.spec.whatwg.org/#map-iterate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-iterate">4.4.1. 
Inheriting Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-remove">
   <a href="https://infra.spec.whatwg.org/#list-remove">https://infra.spec.whatwg.org/#list-remove</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-remove">4.4.2. 
Instantiating Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ordered-set">
   <a href="https://infra.spec.whatwg.org/#ordered-set">https://infra.spec.whatwg.org/#ordered-set</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ordered-set">4.4. 
Creating and Inheriting Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-string">
   <a href="https://infra.spec.whatwg.org/#string">https://infra.spec.whatwg.org/#string</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-string">4.4. 
Creating and Inheriting Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-tuple">
   <a href="https://infra.spec.whatwg.org/#tuple">https://infra.spec.whatwg.org/#tuple</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-tuple">4.4. 
Creating and Inheriting Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-originating-element">
   <a href="https://drafts.csswg.org/selectors-4/#originating-element">https://drafts.csswg.org/selectors-4/#originating-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-originating-element">3.2. 
Generating Marker Contents</a> <a href="#ref-for-originating-element①">(2)</a>
    <li><a href="#ref-for-originating-element②">3.7. 
The marker-side property</a> <a href="#ref-for-originating-element③">(2)</a> <a href="#ref-for-originating-element④">(3)</a> <a href="#ref-for-originating-element⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-rect">
   <a href="https://svgwg.org/svg2-draft/shapes.html#elementdef-rect">https://svgwg.org/svg2-draft/shapes.html#elementdef-rect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-rect">4.5. 
Counters in elements that do not generate boxes</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cascade" style="color:initial">cascade</span>
     <li><span class="dfn-paneled" id="term-for-computed-value" style="color:initial">computed value</span>
     <li><span class="dfn-paneled" id="term-for-inheritance" style="color:initial">inheritance</span>
     <li><span class="dfn-paneled" id="term-for-specified-value" style="color:initial">specified value</span>
     <li><span class="dfn-paneled" id="term-for-used-value" style="color:initial">used value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-content-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-content" style="color:initial">content</span>
     <li><span class="dfn-paneled" id="term-for-valdef-content-none" style="color:initial">none</span>
     <li><span class="dfn-paneled" id="term-for-valdef-content-normal" style="color:initial">normal</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-counter-styles-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-counter-style" style="color:initial">&lt;counter-style></span>
     <li><span class="dfn-paneled" id="term-for-counter-style" style="color:initial">counter style</span>
     <li><span class="dfn-paneled" id="term-for-decimal" style="color:initial">decimal</span>
     <li><span class="dfn-paneled" id="term-for-generate-a-counter" style="color:initial">generate a counter representation</span>
     <li><span class="dfn-paneled" id="term-for-descdef-counter-style-prefix" style="color:initial">prefix</span>
     <li><span class="dfn-paneled" id="term-for-descdef-counter-style-suffix" style="color:initial">suffix</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-DISPLAY-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-anonymous" style="color:initial">anonymous</span>
     <li><span class="dfn-paneled" id="term-for-block-container" style="color:initial">block container</span>
     <li><span class="dfn-paneled" id="term-for-blockify" style="color:initial">blockify</span>
     <li><span class="dfn-paneled" id="term-for-propdef-display" style="color:initial">display</span>
     <li><span class="dfn-paneled" id="term-for-display-type" style="color:initial">display type</span>
     <li><span class="dfn-paneled" id="term-for-inline" style="color:initial">inline</span>
     <li><span class="dfn-paneled" id="term-for-inline-box" style="color:initial">inline box</span>
     <li><span class="dfn-paneled" id="term-for-inline-level" style="color:initial">inline-level</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-list-item" style="color:initial">list-item</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-none" style="color:initial">none</span>
     <li><span class="dfn-paneled" id="term-for-principal-box" style="color:initial">principal box</span>
     <li><span class="dfn-paneled" id="term-for-replaced-element" style="color:initial">replaced element</span>
     <li><span class="dfn-paneled" id="term-for-text-run" style="color:initial">text run</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-flexbox-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-order" style="color:initial">order</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-images-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-invalid-image" style="color:initial">valid image</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-overflow" style="color:initial">overflow</span>
     <li><span class="dfn-paneled" id="term-for-valdef-overflow-visible" style="color:initial">visible</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-position-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-position" style="color:initial">position</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-pseudo-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-selectordef-before" style="color:initial">::before</span>
     <li><span class="dfn-paneled" id="term-for-selectordef-marker" style="color:initial">::marker</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-css-invalid" style="color:initial">invalid</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-integer-value" style="color:initial">&lt;integer></span>
     <li><span class="dfn-paneled" id="term-for-string-value" style="color:initial">&lt;string></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-one-plus" style="color:initial">+</span>
     <li><span class="dfn-paneled" id="term-for-identifier-value" style="color:initial">&lt;custom-ident></span>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-funcdef-calc" style="color:initial">calc()</span>
     <li><span class="dfn-paneled" id="term-for-functional-notation" style="color:initial">functional notation</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
     <li><span class="dfn-paneled" id="term-for-comb-any" style="color:initial">||</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-variables-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-custom-property" style="color:initial">custom property</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-inline-start" style="color:initial">inline-start</span>
     <li><span class="dfn-paneled" id="term-for-writing-mode" style="color:initial">writing mode</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-visibility" style="color:initial">visibility</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css3-images]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-image" style="color:initial">&lt;image></span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-tree-root" style="color:initial">root</span>
     <li><span class="dfn-paneled" id="term-for-concept-tree-order" style="color:initial">tree order</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-li-element" style="color:initial">li</span>
     <li><span class="dfn-paneled" id="term-for-the-ol-element" style="color:initial">ol</span>
     <li><span class="dfn-paneled" id="term-for-the-option-element" style="color:initial">option</span>
     <li><span class="dfn-paneled" id="term-for-the-ul-element" style="color:initial">ul</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-set-append" style="color:initial">append</span>
     <li><span class="dfn-paneled" id="term-for-list-contain" style="color:initial">contain</span>
     <li><span class="dfn-paneled" id="term-for-map-iterate" style="color:initial">for each</span>
     <li><span class="dfn-paneled" id="term-for-list-remove" style="color:initial">remove</span>
     <li><span class="dfn-paneled" id="term-for-ordered-set" style="color:initial">set</span>
     <li><span class="dfn-paneled" id="term-for-string" style="color:initial">string</span>
     <li><span class="dfn-paneled" id="term-for-tuple" style="color:initial">tuple</span>
    </ul>
   <li>
    <a data-link-type="biblio">[selectors-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-originating-element" style="color:initial">originating element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-elementdef-rect" style="color:initial">rect</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-content-3">[CSS-CONTENT-3]
   <dd>Elika Etemad; Dave Cramer. <a href="https://www.w3.org/TR/css-content-3/">CSS Generated Content Module Level 3</a>. 2 June 2016. WD. URL: <a href="https://www.w3.org/TR/css-content-3/">https://www.w3.org/TR/css-content-3/</a>
   <dt id="biblio-css-counter-styles-3">[CSS-COUNTER-STYLES-3]
   <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-counter-styles-3/">CSS Counter Styles Level 3</a>. 14 December 2017. CR. URL: <a href="https://www.w3.org/TR/css-counter-styles-3/">https://www.w3.org/TR/css-counter-styles-3/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1]
   <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a>. 19 November 2018. CR. URL: <a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a>
   <dt id="biblio-css-images-4">[CSS-IMAGES-4]
   <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module Level 4</a>. 13 April 2017. WD. URL: <a href="https://www.w3.org/TR/css-images-4/">https://www.w3.org/TR/css-images-4/</a>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-position-3">[CSS-POSITION-3]
   <dd>Rossen Atanassov; Arron Eicholz. <a href="https://www.w3.org/TR/css-position-3/">CSS Positioned Layout Module Level 3</a>. 17 May 2016. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a>
   <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4]
   <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://www.w3.org/TR/css-pseudo-4/">CSS Pseudo-Elements Module Level 4</a>. 25 February 2019. WD. URL: <a href="https://www.w3.org/TR/css-pseudo-4/">https://www.w3.org/TR/css-pseudo-4/</a>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-variables-1">[CSS-VARIABLES-1]
   <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-variables-1/">CSS Custom Properties for Cascading Variables Module Level 1</a>. 3 December 2015. CR. URL: <a href="https://www.w3.org/TR/css-variables-1/">https://www.w3.org/TR/css-variables-1/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-css3-images">[CSS3-IMAGES]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css3-images/">CSS Image Values and Replaced Content Module Level 3</a>. 17 April 2012. CR. URL: <a href="https://www.w3.org/TR/css3-images/">https://www.w3.org/TR/css3-images/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-selectors-4">[SELECTORS-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>. 21 November 2018. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a>
   <dt id="biblio-svg2">[SVG2]
   <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment①⑥">counter-increment</a>
      <td>[ &lt;counter-name> &lt;integer>? ]+ | none
      <td>none
      <td>all elements
      <td>no
      <td>n/a
      <td>by computed value type
      <td>per grammar
      <td>the keyword none or a list, each item an identifier paired with an integer
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset⑥">counter-reset</a>
      <td>[ &lt;counter-name> &lt;integer>? ]+ | none
      <td>none
      <td>all elements
      <td>no
      <td>n/a
      <td>by computed value type
      <td>per grammar
      <td>the keyword none or a list, each item an identifier paired with an integer
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-counter-set" id="ref-for-propdef-counter-set①⓪">counter-set</a>
      <td>[ &lt;counter-name> &lt;integer>? ]+ | none
      <td>none
      <td>all elements
      <td>no
      <td>n/a
      <td>by computed value type
      <td>per grammar
      <td>the keyword none or a list, each item an identifier paired with an integer
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-list-style" id="ref-for-propdef-list-style⑥">list-style</a>
      <td>&lt;'list-style-position'> || &lt;'list-style-image'> || &lt;'list-style-type'>
      <td>see individual properties
      <td>list items
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image⑥">list-style-image</a>
      <td>&lt;image> | none
      <td>none
      <td>list items
      <td>yes
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>the keyword noneor the computed &lt;image>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-list-style-position" id="ref-for-propdef-list-style-position③">list-style-position</a>
      <td>inside | outside
      <td>outside
      <td>list items
      <td>yes
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>keyword, but see prose
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type①⓪">list-style-type</a>
      <td>&lt;counter-style> | &lt;string> | none
      <td>disc
      <td>list items
      <td>yes
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>specified value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-marker-side" id="ref-for-propdef-marker-side⑤">marker-side</a>
      <td>match-self | match-parent
      <td>match-self
      <td>list items
      <td>yes
      <td>n/a
      <td>discrete
      <td>per grammar
      <td>specified keyword
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> This is handwavey nonsense from CSS2, and needs a real definition.<a href="#issue-ffa70ac6"> ↵ </a></div>
   <div class="issue"> Alternatively, <a class="css" data-link-type="maybe" href="#list-style-position-outside">outside</a> could lay out the marker as a previous sibling of the principal inline box.<a href="#issue-bf311ada"> ↵ </a></div>
   <div class="issue">
     Counters are sometimes useful for things other than printing markers.
		In general, they provide the ability to number elements in sequence,
		which can be useful for other properties to reference.
		For example, using <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-flexbox-1/#propdef-order">order</a> to put an element between two other specific elements
		currently requires you to explicitly put <span class="property">order</span> on every element before and/or after the desired insertion point.
		If you can set the <span class="property">order</span> value of everything to a counter, tho,
		you can more easily insert an element into an arbitrary spot between two others. 
    <p>Other use-cases involve nested or sibling elements with transforms that are meant to be slightly different from each other.
		Today you have to use a preprocessor to do this in a reasonable way,
		but a counter would make it work well in "plain" CSS.</p>
    <p>(You can built up successive values in the nested case today
		by using <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property">custom properties</a> and stacking up nested <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#funcdef-calc">calc()</a>s,
		but this is a *little bit* clumsy,
		and doesn’t work for siblings.)</p>
    <p>Suggestion is to add a <span class="css">counter-value(<a class="production css" data-link-type="type" href="#typedef-counter-name">&lt;counter-name></a>)</span> function,
		which returns the value of the named counter as an integer,
		rather than returning a string.</p>
    <p>See <a href="https://github.com/w3c/csswg-drafts/issues/1026">Issue 1026</a>.</p>
     <a href="#issue-4b0c2d48"> ↵ </a>
   </div>
   <div class="issue"> Discussion of how to support <code>ol[reversed]</code> list numbering in CSS is ongoing.
	See, e.g. <a href="https://github.com/w3c/csswg-drafts/issues/4181">Issue 4181</a>.<a href="#issue-33887700"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="list-item">
   <b><a href="#list-item">#list-item</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-item">2. 
Declaring a List Item</a> <a href="#ref-for-list-item①">(2)</a>
    <li><a href="#ref-for-list-item②">3. 
Markers</a> <a href="#ref-for-list-item③">(2)</a> <a href="#ref-for-list-item④">(3)</a> <a href="#ref-for-list-item⑤">(4)</a> <a href="#ref-for-list-item⑥">(5)</a>
    <li><a href="#ref-for-list-item⑦">3.1. 
The ::marker Pseudo-Element</a> <a href="#ref-for-list-item⑧">(2)</a> <a href="#ref-for-list-item⑨">(3)</a>
    <li><a href="#ref-for-list-item①⓪">3.3. 
Image Markers: the list-style-image property</a> <a href="#ref-for-list-item①①">(2)</a>
    <li><a href="#ref-for-list-item①②">3.4. 
Text-based Markers: the list-style-type property</a> <a href="#ref-for-list-item①③">(2)</a>
    <li><a href="#ref-for-list-item①④">3.5. 
Positioning Markers: The list-style-position property</a> <a href="#ref-for-list-item①⑤">(2)</a> <a href="#ref-for-list-item①⑥">(3)</a> <a href="#ref-for-list-item①⑦">(4)</a> <a href="#ref-for-list-item①⑧">(5)</a>
    <li><a href="#ref-for-list-item①⑨">3.6. 
Styling Markers: the list-style shorthand property</a>
    <li><a href="#ref-for-list-item②⓪">3.7. 
The marker-side property</a>
    <li><a href="#ref-for-list-item②①">4.6. 
The Implicit list-item Counter</a> <a href="#ref-for-list-item②②">(2)</a> <a href="#ref-for-list-item②③">(3)</a> <a href="#ref-for-list-item②④">(4)</a> <a href="#ref-for-list-item②⑤">(5)</a> <a href="#ref-for-list-item②⑥">(6)</a> <a href="#ref-for-list-item②⑦">(7)</a> <a href="#ref-for-list-item②⑧">(8)</a>
    <li><a href="#ref-for-list-item②⑨">Changes From CSS Level 2</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="marker">
   <b><a href="#marker">#marker</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-marker">3. 
Markers</a> <a href="#ref-for-marker①">(2)</a> <a href="#ref-for-marker②">(3)</a>
    <li><a href="#ref-for-marker③">3.1. 
The ::marker Pseudo-Element</a> <a href="#ref-for-marker④">(2)</a>
    <li><a href="#ref-for-marker⑤">3.2. 
Generating Marker Contents</a> <a href="#ref-for-marker⑥">(2)</a> <a href="#ref-for-marker⑦">(3)</a> <a href="#ref-for-marker⑧">(4)</a> <a href="#ref-for-marker⑨">(5)</a>
    <li><a href="#ref-for-marker①⓪">3.3. 
Image Markers: the list-style-image property</a>
    <li><a href="#ref-for-marker①①">3.4. 
Text-based Markers: the list-style-type property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-list-style-image">
   <b><a href="#propdef-list-style-image">#propdef-list-style-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-list-style-image">3. 
Markers</a>
    <li><a href="#ref-for-propdef-list-style-image①">3.2. 
Generating Marker Contents</a>
    <li><a href="#ref-for-propdef-list-style-image②">3.3. 
Image Markers: the list-style-image property</a>
    <li><a href="#ref-for-propdef-list-style-image③">3.6. 
Styling Markers: the list-style shorthand property</a> <a href="#ref-for-propdef-list-style-image④">(2)</a> <a href="#ref-for-propdef-list-style-image⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="marker-image">
   <b><a href="#marker-image">#marker-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-marker-image">3.2. 
Generating Marker Contents</a> <a href="#ref-for-marker-image①">(2)</a>
    <li><a href="#ref-for-marker-image②">3.3. 
Image Markers: the list-style-image property</a> <a href="#ref-for-marker-image③">(2)</a> <a href="#ref-for-marker-image④">(3)</a>
    <li><a href="#ref-for-marker-image⑤">3.4. 
Text-based Markers: the list-style-type property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-list-style-image-none">
   <b><a href="#valdef-list-style-image-none">#valdef-list-style-image-none</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-list-style-image-none">3.3. 
Image Markers: the list-style-image property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-list-style-type">
   <b><a href="#propdef-list-style-type">#propdef-list-style-type</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-list-style-type">3. 
Markers</a>
    <li><a href="#ref-for-propdef-list-style-type①">3.2. 
Generating Marker Contents</a>
    <li><a href="#ref-for-propdef-list-style-type②">3.4. 
Text-based Markers: the list-style-type property</a>
    <li><a href="#ref-for-propdef-list-style-type③">3.6. 
Styling Markers: the list-style shorthand property</a> <a href="#ref-for-propdef-list-style-type④">(2)</a> <a href="#ref-for-propdef-list-style-type⑤">(3)</a>
    <li><a href="#ref-for-propdef-list-style-type⑥">4.6. 
The Implicit list-item Counter</a> <a href="#ref-for-propdef-list-style-type⑦">(2)</a>
    <li><a href="#ref-for-propdef-list-style-type⑧">Changes since the 20 March 2014 WD</a>
    <li><a href="#ref-for-propdef-list-style-type⑨">Changes From CSS Level 2</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="marker-string">
   <b><a href="#marker-string">#marker-string</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-marker-string">3.2. 
Generating Marker Contents</a> <a href="#ref-for-marker-string①">(2)</a>
    <li><a href="#ref-for-marker-string②">3.4. 
Text-based Markers: the list-style-type property</a> <a href="#ref-for-marker-string③">(2)</a> <a href="#ref-for-marker-string④">(3)</a> <a href="#ref-for-marker-string⑤">(4)</a>
    <li><a href="#ref-for-marker-string⑥">4.6. 
The Implicit list-item Counter</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-list-style-position">
   <b><a href="#propdef-list-style-position">#propdef-list-style-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-list-style-position">3.5. 
Positioning Markers: The list-style-position property</a>
    <li><a href="#ref-for-propdef-list-style-position①">3.6. 
Styling Markers: the list-style shorthand property</a> <a href="#ref-for-propdef-list-style-position②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-list-style-position-inside">
   <b><a href="#valdef-list-style-position-inside">#valdef-list-style-position-inside</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-list-style-position-inside">3.5. 
Positioning Markers: The list-style-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="list-style-position-outside">
   <b><a href="#list-style-position-outside">#list-style-position-outside</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-style-position-outside">3.5. 
Positioning Markers: The list-style-position property</a>
    <li><a href="#ref-for-list-style-position-outside①">Changes since the 17 August 2019 WD</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-list-style">
   <b><a href="#propdef-list-style">#propdef-list-style</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-list-style">3.6. 
Styling Markers: the list-style shorthand property</a> <a href="#ref-for-propdef-list-style①">(2)</a> <a href="#ref-for-propdef-list-style②">(3)</a> <a href="#ref-for-propdef-list-style③">(4)</a>
    <li><a href="#ref-for-propdef-list-style④">4.3. 
Nested Counters and Scope</a>
    <li><a href="#ref-for-propdef-list-style⑤">Changes since the 20 March 2014 WD</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-marker-side">
   <b><a href="#propdef-marker-side">#propdef-marker-side</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-marker-side">3.5. 
Positioning Markers: The list-style-position property</a>
    <li><a href="#ref-for-propdef-marker-side①">3.7. 
The marker-side property</a> <a href="#ref-for-propdef-marker-side②">(2)</a> <a href="#ref-for-propdef-marker-side③">(3)</a>
    <li><a href="#ref-for-propdef-marker-side④">Changes since the 20 March 2014 WD</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-marker-side-match-self">
   <b><a href="#valdef-marker-side-match-self">#valdef-marker-side-match-self</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-marker-side-match-self">3.7. 
The marker-side property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-marker-side-match-parent">
   <b><a href="#valdef-marker-side-match-parent">#valdef-marker-side-match-parent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-marker-side-match-parent">3.7. 
The marker-side property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="counter">
   <b><a href="#counter">#counter</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-counter">1. 
Introduction</a>
    <li><a href="#ref-for-counter①">2. 
Declaring a List Item</a>
    <li><a href="#ref-for-counter②">4. 
Automatic Numbering With Counters</a>
    <li><a href="#ref-for-counter③">4.1. 
Creating Counters: the counter-reset property</a>
    <li><a href="#ref-for-counter④">4.2. 
Manipulating Counter Values: the counter-increment and counter-set properties</a>
    <li><a href="#ref-for-counter⑤">4.3. 
Nested Counters and Scope</a> <a href="#ref-for-counter⑥">(2)</a>
    <li><a href="#ref-for-counter⑦">4.4. 
Creating and Inheriting Counters</a> <a href="#ref-for-counter⑧">(2)</a>
    <li><a href="#ref-for-counter⑨">4.4.1. 
Inheriting Counters</a> <a href="#ref-for-counter①⓪">(2)</a>
    <li><a href="#ref-for-counter①①">4.4.2. 
Instantiating Counters</a> <a href="#ref-for-counter①②">(2)</a> <a href="#ref-for-counter①③">(3)</a> <a href="#ref-for-counter①④">(4)</a> <a href="#ref-for-counter①⑤">(5)</a> <a href="#ref-for-counter①⑥">(6)</a>
    <li><a href="#ref-for-counter①⑦">4.6. 
The Implicit list-item Counter</a> <a href="#ref-for-counter①⑧">(2)</a> <a href="#ref-for-counter①⑨">(3)</a> <a href="#ref-for-counter②⓪">(4)</a> <a href="#ref-for-counter②①">(5)</a> <a href="#ref-for-counter②②">(6)</a>
    <li><a href="#ref-for-counter②③">4.7. 
Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-counter②④">(2)</a> <a href="#ref-for-counter②⑤">(3)</a> <a href="#ref-for-counter②⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-counter-name">
   <b><a href="#typedef-counter-name">#typedef-counter-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-counter-name">4. 
Automatic Numbering With Counters</a> <a href="#ref-for-typedef-counter-name①">(2)</a> <a href="#ref-for-typedef-counter-name②">(3)</a>
    <li><a href="#ref-for-typedef-counter-name③">4.1. 
Creating Counters: the counter-reset property</a> <a href="#ref-for-typedef-counter-name④">(2)</a> <a href="#ref-for-typedef-counter-name⑤">(3)</a> <a href="#ref-for-typedef-counter-name⑥">(4)</a>
    <li><a href="#ref-for-typedef-counter-name⑦">4.2. 
Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-typedef-counter-name⑧">(2)</a> <a href="#ref-for-typedef-counter-name⑨">(3)</a> <a href="#ref-for-typedef-counter-name①⓪">(4)</a>
    <li><a href="#ref-for-typedef-counter-name①①">4.7. 
Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-typedef-counter-name①②">(2)</a> <a href="#ref-for-typedef-counter-name①③">(3)</a> <a href="#ref-for-typedef-counter-name①④">(4)</a> <a href="#ref-for-typedef-counter-name①⑤">(5)</a> <a href="#ref-for-typedef-counter-name①⑥">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-counter-reset">
   <b><a href="#propdef-counter-reset">#propdef-counter-reset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-counter-reset">4. 
Automatic Numbering With Counters</a> <a href="#ref-for-propdef-counter-reset①">(2)</a>
    <li><a href="#ref-for-propdef-counter-reset②">4.1. 
Creating Counters: the counter-reset property</a> <a href="#ref-for-propdef-counter-reset③">(2)</a>
    <li><a href="#ref-for-propdef-counter-reset④">4.3. 
Nested Counters and Scope</a>
    <li><a href="#ref-for-propdef-counter-reset⑤">4.4.2. 
Instantiating Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-counter-reset-none">
   <b><a href="#valdef-counter-reset-none">#valdef-counter-reset-none</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-counter-reset-none">4. 
Automatic Numbering With Counters</a>
    <li><a href="#ref-for-valdef-counter-reset-none①">4.1. 
Creating Counters: the counter-reset property</a>
    <li><a href="#ref-for-valdef-counter-reset-none②">4.2. 
Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-valdef-counter-reset-none③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-counter-increment">
   <b><a href="#propdef-counter-increment">#propdef-counter-increment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-counter-increment">4. 
Automatic Numbering With Counters</a> <a href="#ref-for-propdef-counter-increment①">(2)</a>
    <li><a href="#ref-for-propdef-counter-increment②">4.1. 
Creating Counters: the counter-reset property</a>
    <li><a href="#ref-for-propdef-counter-increment③">4.2. 
Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-propdef-counter-increment④">(2)</a> <a href="#ref-for-propdef-counter-increment⑤">(3)</a> <a href="#ref-for-propdef-counter-increment⑥">(4)</a>
    <li><a href="#ref-for-propdef-counter-increment⑦">4.4.2. 
Instantiating Counters</a>
    <li><a href="#ref-for-propdef-counter-increment⑧">4.6. 
The Implicit list-item Counter</a> <a href="#ref-for-propdef-counter-increment⑨">(2)</a> <a href="#ref-for-propdef-counter-increment①⓪">(3)</a> <a href="#ref-for-propdef-counter-increment①①">(4)</a> <a href="#ref-for-propdef-counter-increment①②">(5)</a> <a href="#ref-for-propdef-counter-increment①③">(6)</a> <a href="#ref-for-propdef-counter-increment①④">(7)</a>
    <li><a href="#ref-for-propdef-counter-increment①⑤">Changes since the 20 March 2014 WD</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-counter-set">
   <b><a href="#propdef-counter-set">#propdef-counter-set</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-counter-set">4. 
Automatic Numbering With Counters</a> <a href="#ref-for-propdef-counter-set①">(2)</a>
    <li><a href="#ref-for-propdef-counter-set②">4.1. 
Creating Counters: the counter-reset property</a>
    <li><a href="#ref-for-propdef-counter-set③">4.2. 
Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-propdef-counter-set④">(2)</a> <a href="#ref-for-propdef-counter-set⑤">(3)</a> <a href="#ref-for-propdef-counter-set⑥">(4)</a>
    <li><a href="#ref-for-propdef-counter-set⑦">4.4.2. 
Instantiating Counters</a>
    <li><a href="#ref-for-propdef-counter-set⑧">Changes since the 20 March 2014 WD</a>
    <li><a href="#ref-for-propdef-counter-set⑨">Changes From CSS Level 2</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="counter-scope">
   <b><a href="#counter-scope">#counter-scope</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-counter-scope">4.4. 
Creating and Inheriting Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="css-counters-set">
   <b><a href="#css-counters-set">#css-counters-set</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-counters-set">4.4.1. 
Inheriting Counters</a> <a href="#ref-for-css-counters-set①">(2)</a> <a href="#ref-for-css-counters-set②">(3)</a> <a href="#ref-for-css-counters-set③">(4)</a>
    <li><a href="#ref-for-css-counters-set④">4.4.2. 
Instantiating Counters</a>
    <li><a href="#ref-for-css-counters-set⑤">4.7. 
Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-css-counters-set⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="innermost">
   <b><a href="#innermost">#innermost</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-innermost">4.3. 
Nested Counters and Scope</a>
    <li><a href="#ref-for-innermost①">4.7. 
Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-innermost②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inherit-counters">
   <b><a href="#inherit-counters">#inherit-counters</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inherit-counters">4. 
Automatic Numbering With Counters</a>
    <li><a href="#ref-for-inherit-counters①">4.4.1. 
Inheriting Counters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="instantiate-counter">
   <b><a href="#instantiate-counter">#instantiate-counter</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-instantiate-counter">4. 
Automatic Numbering With Counters</a>
    <li><a href="#ref-for-instantiate-counter①">4.1. 
Creating Counters: the counter-reset property</a> <a href="#ref-for-instantiate-counter②">(2)</a>
    <li><a href="#ref-for-instantiate-counter③">4.2. 
Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-instantiate-counter④">(2)</a>
    <li><a href="#ref-for-instantiate-counter⑤">4.3. 
Nested Counters and Scope</a> <a href="#ref-for-instantiate-counter⑥">(2)</a>
    <li><a href="#ref-for-instantiate-counter⑦">4.4.2. 
Instantiating Counters</a> <a href="#ref-for-instantiate-counter⑧">(2)</a>
    <li><a href="#ref-for-instantiate-counter⑨">4.6. 
The Implicit list-item Counter</a>
    <li><a href="#ref-for-instantiate-counter①⓪">4.7. 
Outputting Counters: the counter() and counters() functions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-counter-increment-list-item">
   <b><a href="#valdef-counter-increment-list-item">#valdef-counter-increment-list-item</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-counter-increment-list-item">1. 
Introduction</a>
    <li><a href="#ref-for-valdef-counter-increment-list-item①">2. 
Declaring a List Item</a>
    <li><a href="#ref-for-valdef-counter-increment-list-item②">3.4. 
Text-based Markers: the list-style-type property</a> <a href="#ref-for-valdef-counter-increment-list-item③">(2)</a>
    <li><a href="#ref-for-valdef-counter-increment-list-item④">4.6. 
The Implicit list-item Counter</a> <a href="#ref-for-valdef-counter-increment-list-item⑤">(2)</a> <a href="#ref-for-valdef-counter-increment-list-item⑥">(3)</a> <a href="#ref-for-valdef-counter-increment-list-item⑦">(4)</a> <a href="#ref-for-valdef-counter-increment-list-item⑧">(5)</a> <a href="#ref-for-valdef-counter-increment-list-item⑨">(6)</a> <a href="#ref-for-valdef-counter-increment-list-item①⓪">(7)</a> <a href="#ref-for-valdef-counter-increment-list-item①①">(8)</a> <a href="#ref-for-valdef-counter-increment-list-item①②">(9)</a> <a href="#ref-for-valdef-counter-increment-list-item①③">(10)</a> <a href="#ref-for-valdef-counter-increment-list-item①④">(11)</a>
    <li><a href="#ref-for-valdef-counter-increment-list-item①⑤">Changes since the 20 March 2014 WD</a>
    <li><a href="#ref-for-valdef-counter-increment-list-item①⑥">Changes From CSS Level 2</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-counter">
   <b><a href="#typedef-counter">#typedef-counter</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-counter">4.7. 
Outputting Counters: the counter() and counters() functions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-counter">
   <b><a href="#funcdef-counter">#funcdef-counter</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-counter">4. 
Automatic Numbering With Counters</a> <a href="#ref-for-funcdef-counter①">(2)</a>
    <li><a href="#ref-for-funcdef-counter②">4.3. 
Nested Counters and Scope</a>
    <li><a href="#ref-for-funcdef-counter③">4.4.2. 
Instantiating Counters</a>
    <li><a href="#ref-for-funcdef-counter④">4.7. 
Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-funcdef-counter⑤">(2)</a> <a href="#ref-for-funcdef-counter⑥">(3)</a> <a href="#ref-for-funcdef-counter⑦">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-counters">
   <b><a href="#funcdef-counters">#funcdef-counters</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-counters">4. 
Automatic Numbering With Counters</a> <a href="#ref-for-funcdef-counters①">(2)</a>
    <li><a href="#ref-for-funcdef-counters②">4.3. 
Nested Counters and Scope</a>
    <li><a href="#ref-for-funcdef-counters③">4.4.2. 
Instantiating Counters</a>
    <li><a href="#ref-for-funcdef-counters④">4.7. 
Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-funcdef-counters⑤">(2)</a> <a href="#ref-for-funcdef-counters⑥">(3)</a> <a href="#ref-for-funcdef-counters⑦">(4)</a> <a href="#ref-for-funcdef-counters⑧">(5)</a> <a href="#ref-for-funcdef-counters⑨">(6)</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>